React native 如何将标题/标题添加到我们通过“创建底部选项卡导航器”（react navigation v5）导航的每个屏幕？

我的

BottomNavigation

组件：

const Tab = createBottomTabNavigator();

class BottomNavigation extends React.Component {
  render() {
    return (
      <Tab.Navigator initialRouteName="Home" backBehavior="initialRoute">
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarLabel: 'Start',
            tabBarIcon: ({ color, size }) => (
              <Image source={require('../../assets/images/start-tab.png')} />
            ),
            title: 'Welcome',
          }}
        />
        <Tab.Screen
          name="Science"
          component={Profile}
          options={{
            tabBarLabel: 'Profile',
            tabBarIcon: ({ color, size }) => (
              <Image source={require('../../assets/images/science-tab.png')} />
            ),
          }}
        />
      </Tab.Navigator>
    );
  }
}

const Tab=createBottomTabNavigator（）；
类。组件{
render（）{
返回(
(
),
标题:"欢迎",，
}}
/>
(
),
}}
/>
);
}
}

您需要创建StackNavigator以在底部导航中显示标题

通过在组件内部设置

navigationOptions

，可以将其应用于调用组件的导航元素

因此，在您的案例中，您在

About

中定义的标题适用于底部选项卡，而不是您希望的屏幕

创建堆栈导航时，您需要直接定义它，而不是将

navigationOptions

设置为组件内部的静态属性

除此之外，我认为您希望将堆栈嵌套在底部选项卡导航中，而不是相反。这样，您可以为每个屏幕设置不同的标题

以下是一个例子：

const AboutStack=createStackNavigator（{About:{screen:About，navigationOptions:{title:'About title'}}}）；
const CreditStack=createStackNavigator（{Credit:{screen:Credit，navigationOptions:{title:'Credit title'}}}）；
const main navigator=createBottomTabNavigator({
关于：{screen:AboutStack，导航选项：{title:'About Label'}}，
信用：{screen:CreditStack，导航选项：{title:'Credit Label'}}，
});
const AppContainer=createAppContainer（MainNavigator）；

这样，标题标题将是“关于标题”，选项卡标签是“关于标签”