如何配置React Navigation使SideDrawer与BottomTabNavigator共享页面并全局可用

问题根源 #

直接在NavigationContainer中同时放置SideDrawer和BottomTabNavigator是错误配置——NavigationContainer仅允许存在一个根导航器。要实现三个页面同时支持两种导航，必须采用嵌套导航结构。

正确实现方案 #

将BottomTabNavigator作为SideDrawer的核心屏幕，让底部标签导航下的所有页面都能访问抽屉导航功能，同时保留底部标签的页面切换能力。

步骤1：创建基础屏幕组件 #

import { View, Text, Button } from 'react-native';

function Screen1({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Screen 1</Text>
      <Button title="打开抽屉" onPress={() => navigation.getParent().openDrawer()} />
      <Button title="切换到Screen2" onPress={() => navigation.navigate('Screen2')} />
    </View>
  );
}

function Screen2({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Screen 2</Text>
      <Button title="打开抽屉" onPress={() => navigation.getParent().openDrawer()} />
      <Button title="切换到Screen3" onPress={() => navigation.navigate('Screen3')} />
    </View>
  );
}

function Screen3({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Screen 3</Text>
      <Button title="打开抽屉" onPress={() => navigation.getParent().openDrawer()} />
      <Button title="切换到Screen1" onPress={() => navigation.navigate('Screen1')} />
    </View>
  );
}

步骤2：构建底部标签导航 #

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from '@expo/vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

function BottomTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === 'Screen1') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Screen2') {
            iconName = focused ? 'list' : 'list-outline';
          } else if (route.name === 'Screen3') {
            iconName = focused ? 'settings' : 'settings-outline';
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#2196F3',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="Screen1" component={Screen1} />
      <Tab.Screen name="Screen2" component={Screen2} />
      <Tab.Screen name="Screen3" component={Screen3} />
    </Tab.Navigator>
  );
}

步骤3：构建抽屉导航 #

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

const Drawer = createDrawerNavigator();

function SideDrawer() {
  return (
    <Drawer.Navigator initialRouteName="MainTabs">
      {/* 将底部标签导航作为抽屉的核心页面 */}
      <Drawer.Screen name="MainTabs" component={BottomTabs} options={{ title: '主页' }} />
      {/* 可按需添加抽屉独立页面 */}
      {/* <Drawer.Screen name="Help" component={HelpScreen} /> */}
    </Drawer.Navigator>
  );
}

步骤4：配置App根导航 #

import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* 抽屉导航作为根导航器 */}
      <SideDrawer />
    </NavigationContainer>
  );
}

核心逻辑说明 #

• 嵌套关系：抽屉导航作为根容器，底部标签导航作为抽屉的一个屏幕，确保标签内所有页面都能通过navigation.getParent()获取抽屉导航实例，调用openDrawer()方法。
• 导航操作：
  • 切换底部标签：直接使用navigation.navigate('目标页面名称')
  • 打开抽屉：使用navigation.getParent().openDrawer()（当前页面导航实例来自底部标签，需获取父级抽屉导航实例）
• 若需从抽屉直接跳转到底部标签的指定页面，可使用深层导航：navigation.navigate('MainTabs', { screen: 'Screen2' })

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