如何在 React Native 中创建和使用多个 Tab Navigator？

Question

我正在尝试在 React Native 的单个应用程序中创建不同的底部选项卡导航器。目前我可以正确创建和使用一个，但我想在通过身份验证表单连接到应用程序后显示另一个。

可能吗？

这是我的代码示例，可以帮助您理解如果您不这样做我想做什么：

export default function AppNavigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="SignUp" component={SignUpFunction} />
        <Tab.Screen name="SignIn" component={SignInFunction} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

我想再创建一个，例如：

export default function AppNavigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="SignUp" component={SignUpFunction} />
        <Tab.Screen name="SignIn" component={SignInFunction} />
      </Tab.Navigator>
      <Tab.Navigator>
        <Tab.Screen name="Profil" component={ProfilPageFunction} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

我的问题是不可能有两个 Tab.Navigator

我在 Internet 上找不到讨论它的文档。如果你们有一个或者能够向我解释如何去做那就太棒了。

Answer 1

通过提及 'Different tab navigators'，我假设您希望在不同的屏幕上使用选项卡导航器。

有一些选项可以做到这一点。第一个基于您提供的选项卡名称，您正在尝试使用 authentication flow，方法是根据登录状态呈现选项卡。

export default function AppNavigation() {
  return (
    <NavigationContainer>
      {!isloggedIn?(<Tab.Navigator>
        <Tab.Screen name="SignUp" component={SignUpFunction} />
        <Tab.Screen name="SignIn" component={SignInFunction} />
      </Tab.Navigator>):
      (<Tab.Navigator>
        <Tab.Screen name="Profil" component={ProfilPageFunction} />
      </Tab.Navigator>)}
    </NavigationContainer>
  );
}

此处 isloggedIn 将来自您的上下文或状态，或者您管理状态的方式。

第二个选项是在带有选项卡导航器的堆栈导航器中有多个屏幕，这称为 nesting navigators

inside each screen

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

//在NavigationContainer里面

<Stack.Screen name="Home" component={Home} />

两种方法都有效

如何在 React Native 中创建和使用多个 Tab Navigator？

How to create and use many Tab Navigator in react native?

tabs

react-native