Question

我希望我的初始页不包含标题。但是，我希望标题显示在随后的每个页面上。现在，我当前的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

您可以使用三种方式使用navigationOptions：

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

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

  { ... }   //your navigationOptions

})

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

3）返回defaultNavigationOptions作为函数并使用导航状态：

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

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

})

Answer 2

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

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

如何有条件地在Stack Navigator中渲染标题以进行React Native Navigation？

2 个答案: