使用 createBottomTabNavigator 时是否可以从第二个选项卡开始?

Oli*_*via 1 react-native react-native-navigation stack-navigator react-navigation-bottom-tab

我想让我的选项卡导航器在视觉上保持以下顺序:“主页”选项卡、“连接”选项卡、“聊天”选项卡

但我希望“连接”选项卡(第二个选项卡)成为应用程序加载时打开的第一个选项卡。我没有找到一种方法可以将其添加到堆栈导航器而不重新排列选项卡的顺序。除了第一个具有以下结构的选项卡之外,是否还有另一种方法可以定位选项卡:

const switchNavigator = createSwitchNavigator({
  LoadingScreen,
  FirstLoginScreen,
  loginFlow: createStackNavigator({
    Main: MainScreen,
    EmailLogin: EmailLoginScreen,
    PhoneLogin: RegisterScreens,
  }),
  mainFlow: createBottomTabNavigator(
    {
      Home: createStackNavigator({
        HomeScreen,
        EditAccountScreen,
        EditPreferencesScreen,
        EditProfileScreen,
        ProfileCardScreen,
      }),
      Connect: ConnectionsScreen,
      Chat: createStackNavigator({
        AllChatScreen,
        SingleChat,
      })
    },
    {
      defaultNavigationOptions: ({navigation}) => ({
        tabBarIcon: ({tintColor}) => {
          const {routeName} = navigation.state;
          if (routeName === "Home") {
            return <MaterialIcons name={"home"} size={20} color={tintColor} />;
          } else if (routeName === "Connect") {
            return <MaterialIcons name={"link"} size={20} color={tintColor} />;
          } else if (routeName === "Chat") {
            return <MaterialIcons name={"chat"} size={20} color={tintColor} />;
          }
        },
      }),
      tabBarOptions: {
        activeTintColor: Colors.Brick,
        inactiveTintColor: Colors.Gray,
      },
    }
  ),
});
Run Code Online (Sandbox Code Playgroud)

Ami*_*reh 5

您可以传递一个名为“initialRouteName”的 prop,其中包含您第一次进入导航时想要显示的路线名称

在这里你可以使用 React Navigation V5 来完善更多细节