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

Question

我正在使用react-navigation,我有一个嵌套的StackNavigatorinsdie我的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

在选项卡中,您有错误的属性,假设是tabBarLabel而不是Title

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

static navigationOptions = {
 title: 'Orders'
}

至于标签的标题,它是一个类似的过程.该属性为tabBarLabel.在tabNavigator的导航选项中.以下是文档的链接:https://reactnavigation.org/docs/navigators/tab

static navigationOptions = {
   tabBarLabel: 'Details'
};