Question

我正在为我的应用程序使用RN Navigation v5，我将构建如下图所示的导航：

如您所见，此应用程序有一个简介，然后是一些身份验证屏幕，并且在用户登录后查看主屏幕。所以我想要的是用于主屏幕的简介，抽屉和底部标签导航的堆栈。您可以在下面看到我的代码：

const IntroStack = createStackNavigator();

const IntroNavigation = () => {
  return (
    <NavigationContainer>
      <IntroStack.Navigator>
        <IntroStack.Screen name='intro' component={Intro} options={{ headerShown: false }} />
        <IntroStack.Screen name='login' component={Login} options={{ headerShown: false }} />
        <IntroStack.Screen name='createAccount' component={CreateAccount} options={{ headerShown: false }} />
        <IntroStack.Screen name='forgotPassword' component={ForgotPassword} options={{ headerShown: false }} />
        <IntroStack.Screen name='enterCode' component={EnterCode} options={{ headerShown: false }} />
        <IntroStack.Screen name='changePassword' component={ChangePassword} options={{ headerShown: false }} />
        <IntroStack.Screen name='home' component={Home} options={{ headerShown: false }} />
      </IntroStack.Navigator>
    </NavigationContainer>
  )
}

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

const TabNavigation = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="home" component={Home} />
      <Tab.Screen name="worldTour" component={WorldTour} />
      <Tab.Screen name="Outlet" component={Outlet} />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="OutTherapists" component={OurTherapists} />
    </Tab.Navigator>
  );
}

const DrawerNavigation = () => {
  const dimentions = useWindowDimensions();

  return (
    <Drawer.Navigator drawerStyle={{ width: dimentions.width }} drawerContent={props => <DrawerContent />}>
      <Drawer.Screen name="home" component={IntroNavigation} />
    </Drawer.Navigator>

  );
}

export default TabNavigation;

但是这没有用。我尝试阅读文档并观看了一些教程，但是找不到类似的东西。我知道我必须将这些堆栈相互嵌套，但是我尝试过的任何方法都无法实现我想要的。任何帮助将不胜感激。

Answer 1

const IntroNavigation = () => {
  return (
    <NavigationContainer>
      <IntroStack.Navigator>
        <IntroStack.Screen name='intro' component={Intro} options={{ headerShown: false }} />
        <IntroStack.Screen name='login' component={Login} options={{ headerShown: false }} />
        <IntroStack.Screen name='createAccount' component={CreateAccount} options={{ headerShown: false }} />
        <IntroStack.Screen name='forgotPassword' component={ForgotPassword} options={{ headerShown: false }} />
        <IntroStack.Screen name='enterCode' component={EnterCode} options={{ headerShown: false }} />
        <IntroStack.Screen name='changePassword' component={ChangePassword} options={{ headerShown: false }} />
        <IntroStack.Screen name='home' component={DrawerNavigation} options={{ headerShown: false }} />
      </IntroStack.Navigator>
    </NavigationContainer>
  )
}

const Drawer = createDrawerNavigator();

const DrawerNavigation = () => {
  const dimentions = useWindowDimensions();
  
  return (
    <Drawer.Navigator drawerStyle={{ width: dimentions.width }} drawerContent={props => <DrawerContent />}>
      <Drawer.Screen name="Home" component={TabNavigation} />
    </Drawer.Navigator>

);
}

const Tab = createBottomTabNavigator();

const TabNavigation = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="WorldTour" component={WorldTour} />
      <Tab.Screen name="Outlet" component={Outlet} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
}

export default IntroNavigation;

Answer 2

您的结构应类似于“制表符”：

<Tab.Navigator>
      <Tab.Screen name="home" component={DrawerStack} />
      <Tab.Screen name="worldTour" component={WorldTour} />
      <Tab.Screen name="Outlet" component={Outlet} />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="OutTherapists" component={OurTherapists} />
</Tab.Navigator>

您应使用此选项卡导航器作为主堆栈导航器中的屏幕，如下所示：

<NavigationContainer>
  <IntroStack.Navigator>
    <IntroStack.Screen name='intro' component={Intro} options={{ headerShown: false }} />
    <IntroStack.Screen name='login' component={Login} options={{ headerShown: false }} />
    <IntroStack.Screen name='createAccount' component={CreateAccount} options={{ headerShown: false }} />
    <IntroStack.Screen name='forgotPassword' component={ForgotPassword} options={{ headerShown: false }} />
    <IntroStack.Screen name='enterCode' component={EnterCode} options={{ headerShown: false }} />
    <IntroStack.Screen name='changePassword' component={ChangePassword} options={{ headerShown: false }} />
    <IntroStack.Screen name='Tabs' component={Tabs} options={{ headerShown: false }} />
  </IntroStack.Navigator>
</NavigationContainer>

此外，屏幕的名称不应与每个导航器中的“主”屏幕相同，这将导致从导航参考导航时发生冲突。

对于注册流程，您可以按照以下步骤进行： https://reactnavigation.org/docs/upgrading-from-4.x/#switch-navigator

反应本地导航问题（嵌套堆栈，抽屉和底部标签）

2 个答案: