Question

我正在使用反应导航，我有一个嵌套的StackNavigator insdie my 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'
};

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

1 个答案: