React native 如何在堆栈导航器中有条件地呈现用于本机导航的标题？

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

const SecondPage:（）=>React$Node=（）=>{
返回(
这是第二页
);
};
导出默认第二页；

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

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

---

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

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

---

使用

导航选项有三种方法：

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}
  },

})

使用
导航选项有三种方法：

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}
  },

})

我已经为我的第二页添加了代码。我应该在第二页的哪里添加导航选项？正如建议的那样，可以在呈现之前的任何地方编写导航选项，但最好放在类构造函数之前/之后。你不能让它成为基于类的组件而不是功能组件吗@我已经为我的第二页添加了代码。我应该在第二页的哪里添加导航选项？正如建议的那样，可以在呈现之前的任何地方编写导航选项，但最好放在类构造函数之前/之后。你不能让它成为基于类的组件而不是功能组件吗@VK1Hey Auticcat，请检查一下！嘿，Auticcat，你能检查一下这个吗！