时间戳

首页 > 解决方案 > 如何在 react native 中创建和使用多个 Tab Navigator？

react-native - 如何在 react native 中创建和使用多个 Tab Navigator？

问题描述

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

是否可以 ？

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

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

我没有在互联网上找到有关它的文档。如果你们有一个或能够解释我如何做到这一点，那就太棒了。

标签： react-nativetabs

解决方案

通过提及“不同的选项卡导航器”，我假设您希望在不同的屏幕中拥有选项卡导航器。

有一些选项可以做到这一点。第一个基于您提供的选项卡名称，您正在尝试进行身份验证流程，方法是根据登录状态呈现选项卡。

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 将来自您的上下文或状态，或者您管理状态。

第二种选择是在带有标签导航器的堆栈导航器中拥有多个屏幕，这称为嵌套导航器

inside each screen

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

//在导航容器内

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

两种方法都行

推荐阅读