reactjs - React-Navigation:选项卡名称和标题名称相同

Question

我正在使用 react 导航，我有一个嵌套的 StackNavigator 独立于我的 TabNavigator这是代码

  const MainNavigator = TabNavigator({
 selectadmin: { screen: SelectAdminScreen },
 otp: { screen: OtpScreen },
 password: { screen: PasswordScreen },
 pin: { screen: PinScreen },
 main: {
   screen: TabNavigator({
     orders: {
           screen: StackNavigator({
             orderlist: { screen: OrderListScreen },
             orderdetail: { screen: OrderDetailScreen }
           })
         }
   },
   {
     tabBarPosition: 'bottom',
     lazy: true,
     tabBarOptions: {
       labelStyle: { fontSize: 12 }
     }
   })
 }
},
{
 navigationOptions: {
  tabBarVisible: false
},
tabBarPosition: 'bottom',
swipeEnabled: false,
lazy: true,
animationEnabled: false,
//backBehavior: 'none',
});

在我的订单列表中

    static navigationOptions = ({ navigation }) => ({
      title: 'Orders',
      headerRight: (
        <Button
          title="Settings"
          onPress={() => navigation.navigate('settings')}
          backgroundColor="rgba(0,0,0,0)"
          color="rgba(0,122,255,1)"
        />
      ),
      headerStyle: { marginTop: Platform.OS === 'android' ? 20 : 0 },
      tabBarIcon: ({ tintColor }) => {
      return <Icon name="favorite" size={30} color={tintColor} />;
     }
  })

但是我的选项卡和标题名称是相同的，即 Orders，我怎样才能为选项卡和标题设置不同的名称？

Answer 1

在 Tabs 中你有错误的属性应该是 tabBarLabel 而不是 Title

要向堆栈导航添加标题，您需要在堆栈导航的导航选项中指定标题属性，就像在文档中一样:https://reactnavigation.org/docs/navigators/stack

static navigationOptions = {
 title: 'Orders'
}

至于tab的title，也是类似的过程。该属性是 tabBarLabel。在 tabNavigator 的导航选项中。这是文档的链接:https://reactnavigation.org/docs/navigators/tab

static navigationOptions = {
   tabBarLabel: 'Details'
};