React-Navigation: 选项卡名称与 header 名称相同

Question

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

但是我的选项卡和 header 名称相同，即 Orders，我如何才能让选项卡和 header 具有不同的名称？

Answer 1

在 Tabs 中你有错误属性假设是 tabBarLabel 而不是 Title

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

static navigationOptions = {
 title: 'Orders'
}

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

static navigationOptions = {
   tabBarLabel: 'Details'
};

React-Navigation: 选项卡名称与 header 名称相同

React-Navigation: Tab name and header name is same

reactjs

react-native

react-navigation