React Native中如何同时使用抽屉导航与堆栈导航？

核心是理清导航层级：认证堆栈（AuthStack）作为入口，验证通过后跳转到抽屉导航（DrawerNavigation），而非让两者同级放置。

1. 调整AuthStack的配置 #

在AuthStack中仅保留登录、注册等认证相关页面，当用户认证成功（比如登录操作完成后），通过导航跳转到抽屉导航的初始页面（例如命名为Home）。

示例AuthStack代码参考：

const AuthStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
      {/* 无需直接嵌入DrawerNavigation，通过导航跳转实现切换 */}
    </Stack.Navigator>
  );
};

2. 修改App组件的结构 #

借助AuthProvider中维护的用户登录状态，动态渲染对应的导航组件，避免同时渲染两个导航：

const App = () => {
  const { user } = useAuth(); // 假设AuthProvider提供了用户状态的hooks

  return (
    <AuthProvider>
      <NavigationContainer>
        {/* 根据登录状态切换显示的导航 */}
        {user ? <DrawerNavigation /> : <AuthStack />}
      </NavigationContainer>
    </AuthProvider>
  );
};

3. 配置抽屉导航内部结构 #

抽屉导航内部可嵌套堆栈导航，满足不同页面的跳转需求，示例如下：

const DrawerNavigation = () => {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeStack} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
      {/* 添加其他抽屉菜单选项 */}
    </Drawer.Navigator>
  );
};

// 嵌套的Home堆栈导航
const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeMain" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
};

关键说明 #

• NavigationContainer只能有一个直接子组件，不能同时放置AuthStack和DrawerNavigation。
• 利用AuthProvider的用户状态实现权限控制：未登录时展示认证流程，登录后切换到抽屉导航作为主界面。
• 抽屉导航内部嵌套堆栈，可满足页面间的层级跳转需求。

内容的提问来源于stack exchange，提问作者Nirodha Wickramarathna