能否让Drawer Navigator的所有页面均显示底部Tab栏？

问题出在当前的导航嵌套结构：从Drawer直接打开的ProfileScreen不属于TabNavigator的子层级，因此不会渲染底部Tab栏。要实现所有Drawer页面都显示Tab栏，必须让这些页面都处于TabNavigator的上下文范围内，调整嵌套结构即可解决。

核心思路 #

将TabNavigator作为DrawerNavigator的唯一基础屏幕，Drawer中的所有选项不再直接挂载独立屏幕，而是通过跳转指向TabNavigator内部栈的对应页面。这样所有页面都处于Tab层级下，底部Tab栏会始终显示。

具体实现代码 #

1. 定义包含所有页面的Stack Navigator #

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      {/* 添加其他需要的页面 */}
    </Stack.Navigator>
  );
};

2. 定义Tab Navigator，包含StackNavigator作为Tab项 #

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Stack" component={StackNavigator} />
      {/* 添加其他底部Tab项 */}
    </Tab.Navigator>
  );
};

3. 定义Drawer Navigator，通过跳转指向Tab内的页面 #

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

const AppNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Homepage"
        component={TabNavigator}
        options={{ drawerLabel: '首页' }}
      />
      <Drawer.Screen
        name="ProfileDrawer"
        options={{
          drawerLabel: '我的',
          onPress: ({ navigation }) => {
            // 跳转到Tab内Stack的Profile页面
            navigation.navigate('Stack', { screen: 'Profile' });
          },
        }}
        // 占位组件，实际页面由跳转触发
        component={() => null}
      />
      {/* 其他Drawer选项同理，都通过onPress跳转Tab内的对应页面 */}
    </Drawer.Navigator>
  );
};

另一种简化写法（无需占位组件） #

如果不想用占位组件，可以直接利用React Navigation的嵌套路由规则，指定完整路由路径：

const AppNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Homepage"
        component={TabNavigator}
        options={{ drawerLabel: '首页' }}
      />
      <Drawer.Screen
        name="Stack/Profile"
        options={{ drawerLabel: '我的' }}
        component={TabNavigator}
      />
      {/* 其他页面格式：TabName/StackScreenName，需与定义的名称一致 */}
    </Drawer.Navigator>
  );
};

这种写法会让Drawer选项直接跳转到Tab内的对应页面，同样能保持底部Tab栏显示。

注意事项 #

• 确保所有需要显示Tab栏的页面都被包含在TabNavigator内部的栈中。
• 嵌套路由的格式需与你定义的Tab和Stack屏幕名称完全匹配。

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