在React Native中使用React Navigation隐藏StackNavigator头部

你的代码里使用的是react-navigation的StackNavigator，要隐藏HomeScreen的导航头部很简单，下面是两种可行的方法：

方法一：在StackNavigator配置中直接设置 #

在定义SimpleApp时，修改Home页面的navigationOptions，添加header: null即可：

const SimpleApp = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: { 
      title: 'Home',
      header: null // 这行会隐藏导航头部
    },
  },
  Chat: {
    screen: ChatScreen,
    navigationOptions: { title: 'Chat with Lucy' }
  },
});

方法二：在HomeScreen组件内部定义导航选项 #

如果你希望导航选项和组件绑定，也可以在HomeScreen类里添加静态的navigationOptions属性：

class HomeScreen extends React.Component {
  // 新增这部分静态属性
  static navigationOptions = {
    header: null,
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button onPress={() => navigate('Chat')} title="Chat with Lucy" />
      </View>
    );
  }
}

两种方法都能达到隐藏HomeScreen导航头部的效果，之后你的页面就只会显示<Text>Hello, Chat App!</Text>和按钮，没有顶部的导航栏了。

内容的提问来源于stack exchange，提问作者user818700