Question

在带有React Navigation 3.11.0的应用中，有3个标签：

return createBottomTabNavigator(
          {
            Event: {
              screen: EventStack,
              navigationOptions: {
                title: "Event",
              },
            },
            Group: {
              screen: GroupStack,
              navigationOptions: {
                title: "Group",
              },
            },
            Contact: {
              screen: ContactStack,
              navigationOptions: {
                title: "Contact",
              },
            },
          }, bottomTabNavOptions,
           {initialRouteName: Group}  //<<<== did not work
      );

我想在Group上设置一个初始标签。试过

{initialRouteName: Group}

和

{initialTabNavigator: Group}

他们两个都不起作用。设置初始标签的正确方法是什么？

bottomTabNavOptions是：

const bottomTabNavOptions =  {
  defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      console.log("route name", routeName);
      let iconName;
      if (routeName === 'Event') {
        iconName = `list-unordered`;
      } else if (routeName === 'Contact') {
        iconName = `person`;
      } else if (routeName === 'Group') {
        iconName = `organization`
      }

      return <Icon name={iconName} size={30} color={tintColor} type='octicon' />;
    },
  }),
  tabBarOptions: {
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray',
  },
};

Answer 1

您需要使用一个字符串，您将在其中传递整个“ Group”组件：

initialRouteName:"Group"

Answer 2

createBottomTabNavigator标签具有两个参数。但是您似乎正在发送三个参数。

createBottomTabNavigator（RouteConfigs，BottomTabNavigatorConfig）;

BottomTabNavigatorConfig ：

initialRouteName：字符串

createBottomTabNavigator(
          {
            Event: {
              screen: EventStack,
              navigationOptions: {
                title: "Event",
              },
            },
            Group: {
              screen: GroupStack,
              navigationOptions: {
                title: "Group",
              },
            },
            Contact: {
              screen: ContactStack,
              navigationOptions: {
                title: "Contact",
              },
            },
          }, 
           {
            initialRouteName: 'Group', <= you use string
            bottomTabNavOptions,
           } 
      );

Answer 3

看到您的评论，您最初尝试传递字符串。同样的事情发生在我身上。我只需要重新启动我使用的模拟器，然后它就可以为我工作。

如何在createBottomTabNavigator（）中设置初始选项卡

3 个答案: