如何在用于 React Native Navigation 的 Stack Navigator 中有条件地呈现 header？

Question

我希望我的初始页面不包含 header。但是，我希望 header 出现在每个后续页面上。现在我当前的 stackNavigator 看起来像这样：

const AppNavigator = createStackNavigator(
  {
    HomeScreen: HomePage,
    SecondPage: SecondPage,
    Account: Account,
    About: About,
  },
  {
    initialRouteName: 'HomeScreen',
    headerMode: 'none',
    navigationOptions: {
      headerVisible: false,
    },
  },
);

export default createAppContainer(AppNavigator);

这是我第二页的基本样板文件：

const SecondPage: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={styles.body}>
        <View style={styles.sectionContainer}>
          <Text style={styles.sectionTitle}>This is the Secondpage</Text>
        </View>
      </View>
    </>
  );
};

export default SecondPage;

Answer 1

可以在渲染前写在每个组件上

 static navigationOptions = ({ navigation }) => {
        const { state } = navigation
        return {
          headerVisible: true // can be true or false
        }
      }

Answer 2

使用 navigationOptions 可以通过三种方式实现此目的：

1) 直接在定义导航器时：

createStackNavigator({
   {
      HomeScreen: {
      screen : HomePage,
      navigationOptions: {header : null}
   },
      SecondPage: SecondPage,
      Account: Account,
      About: About,
  },

  { ... }   //your navigationOptions

})

2) 正如 Shashank Malviya 所说，直接在屏幕内。仅当您不使用功能组件时。

3) Return defaultNavigationOptions 作为函数并使用导航状态：

createStackNavigator({
  { ... }, //your RouteConfigs

  {
     initialRouteName: 'HomeScreen',
     headerMode: 'none',
     defaultNavigationOptions : ({navigation}) => navigation.state.routeName === "HomePage" && {header: null}
  },

})

如何在用于 React Native Navigation 的 Stack Navigator 中有条件地呈现 header？

How do I conditionally render a header in a Stack Navigator for React Native Navigation?

react-native

react-native-navigation