React Native点击Drawer组件后Bottom Tab导航不显示问题求助

你的问题核心是导航层级结构错误：Settings页面被直接挂载在Drawer Navigator的路由中，脱离了Bottom Tab Navigator的上下文，导致跳转后Tab导航栏失去显示依托。

正确的导航层级 #

遵循以下嵌套顺序即可解决：

• 最外层：Stack Navigator（包含登录、注册页面）
• 中间层：Drawer Navigator（包裹整个底部Tab导航）
• 最内层：Bottom Tab Navigator（包含首页、设置等需要保留Tab栏的页面）

所有Tab页面都处于Drawer的上下文内，跳转时Tab栏会持续显示。

代码修改示例 #

1. 定义Bottom Tab Navigator #

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

const Tab = createBottomTabNavigator();

function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      {/* 将Settings页面放入Tab导航中 */}
      <Tab.Screen name="Settings" component={SettingsScreen} />
      {/* 其他需要显示Tab的页面 */}
    </Tab.Navigator>
  );
}

2. 定义Drawer Navigator（包裹Tab导航） #

import { createDrawerNavigator } from '@react-navigation/drawer';
import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

// 自定义Drawer内容，确保跳转指向Tab内的Settings页面
function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Settings"
        onPress={() => props.navigation.navigate('MainTabs', { screen: 'Settings' })}
      />
    </DrawerContentScrollView>
  );
}

function MainDrawer() {
  return (
    <Drawer.Navigator 
      drawerContent={(props) => <CustomDrawerContent {...props} />}
    >
      {/* 只挂载Tab导航作为Drawer的唯一路由 */}
      <Drawer.Screen name="MainTabs" component={MainTabs} />
    </Drawer.Navigator>
  );
}

3. 外层Stack Navigator（包含登录、注册和Drawer） #

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

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator initialRouteName="Login">
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
      <Stack.Screen 
        name="MainDrawer" 
        component={MainDrawer} 
        options={{ headerShown: false }} // 隐藏Stack头部，避免重复
      />
    </Stack.Navigator>
  );
}

关键说明 #

• 不要在Drawer Navigator中直接添加Settings页面路由，否则会脱离Tab层级，导致Tab栏消失。
• 通过navigation.navigate('MainTabs', { screen: 'Settings' })的方式，指定跳转到Tab导航内部的Settings页面，保持Tab栏的显示上下文。

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