从 react-native 中的旧页面隐藏 header

Question

我目前正在开发一个 react-native 应用程序，但我在某个地方停滞了一段时间。问题是我有这样的设置

首页->设置页面->信息页面

我在主页上隐藏了 header，在设置页面上显示了 header 以及我想做的事情：当我导航到信息页面时，我想从设置页面隐藏 header。我的意思是我希望第三页从屏幕上获取所有 space。

我将附上一个关于我的情况的简单示例... 希望有人能告诉我一个解决方案。先感谢您！ :)

https://snack.expo.io/@sapuu_ae/example-snack-stack -> 在 android/iOS 设备上打开它，在网络模拟器上显示效果不佳。

Answer 1

问题不在于 header，只是您的导航设置有点古怪。这里有两个使用不同导航设置的工作版本。首先，我们需要定义屏幕。

class Home extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.paragraph} onPress={() => this.props.navigation.navigate('Second')}>
                    Press it
                </Text>
            </View>
        );
    }
}

class Second extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.paragraph}>
                    Second Page
                </Text>
                <Text style={styles.paragraph} onPress={() => this.props.navigation.navigate('Third')}>
                    Press for Third Page
                </Text>
            </View>
        );
    }
}

class Third extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.paragraph}>
                    Third page here
                </Text>
            </View>
        );
    }
}

这个假设所有屏幕都是同一个堆栈的一部分：

const RootStack = createStackNavigator({
    Home: Home,
    Second: Second,
    Third : Third
});

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

这里假定第三个屏幕与第二个屏幕一起包含在另一个堆栈中。

const secondScreenStack = createStackNavigator({
    Second: Second,
    Third: Third
}, {
    defaultNavigationOptions: {
        header: null
    }
});

const RootStack = createStackNavigator({
    Home: Home,
    Second: secondScreenStack
});

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

从 react-native 中的旧页面隐藏 header

Hide header from old page in react-native

reactjs

react-native

react-navigation-stack