React Native同一页面使用多导航器的实现难题

我正在开发一款React Native移动应用，核心功能分为两类：

• 用户专属功能：心愿单、历史记录，计划用BottomTabNavigator承载
• 通用功能：新闻、关于我们，计划用DrawerNavigator承载

需求是两类导航各自对应不同页面，且同一时间只显示一个全屏界面，同时始终保留两类导航控件。

尝试过的方案及问题 #

方案一：Drawer嵌套Tab导航器 #

代码实现：

import 'react-native-gesture-handler';
import { PaperProvider, MD3LightTheme as DefaultTheme } from 'react-native-paper';
import {SafeAreaView, View, Text} from "react-native";
import {StatusBar} from 'expo-status-bar';
import {NavigationContainer} from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Header from "./components/Header";
/* *screen imports here* */


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

function TabNav() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Wishes" component={ScreenWishlist} />
            <Tab.Screen name="History" component={ScreenHistory} />
        </Tab.Navigator>
    )
}

export default function App()
{
    return (
        <View style={{flex:1, backgroundColor:"#800"}}>
            <SafeAreaView style={{flex:1}}>
                <View style={{flex:1, backgroundColor:"#fff"}}>
                    <PaperProvider theme={theme}>
                        <StatusBar translucent={false} hidden={false} style="light" backgroundColor={'#800'} />

                        <NavigationContainer>
                            <Drawer.Navigator screenOptions={{
                                header: Header
                            }}>
                                <Drawer.Screen name="tabs" component={TabNav} />
                                <Drawer.Screen name="News" component={ScreenNews} />
                                <Drawer.Screen name="About" component={ScreenAboutUs} />
                            </Drawer.Navigator>
                        </NavigationContainer>

                    </PaperProvider>
                </View>
            </SafeAreaView>
        </View>
    );
}

问题：切换到News或About页面时，底部Tab导航栏会消失，无法同时保留两类导航控件。

方案二：使用两个NavigationContainer #

代码实现：

import 'react-native-gesture-handler'; // make sure it's at the top and there's nothing else before it
import { PaperProvider, MD3LightTheme as DefaultTheme } from 'react-native-paper';
import {SafeAreaView, View, Text} from "react-native";
import {StatusBar} from 'expo-status-bar';
import {NavigationContainer} from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Header from "./components/Header";
/* *screen imports here* */

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

export default function App()
{
    return (
        <View style={{flex:1, backgroundColor:"#800"}}>
            <SafeAreaView style={{flex:1}}>
                <View style={{flex:1, backgroundColor:"#fff"}}>
                    <PaperProvider>

                        <NavigationContainer>
                            <Drawer.Navigator screenOptions={{
                                header: Header
                            }}>
                                <Drawer.Screen name="News" component={ScreenNews} />
                                <Drawer.Screen name="About" component={ScreenAboutUs} />
                            </Drawer.Navigator>
                            
                        </NavigationContainer>

                        <NavigationContainer>
                            <Tab.Navigator>
                                <Tab.Screen name="Wishes" component={ScreenWishlist} />
                                <Tab.Screen name="History" component={ScreenHistory} />
                            </Tab.Navigator>
                        </NavigationContainer>

                    </PaperProvider>
                </View>
            </SafeAreaView>
        </View>
    );
}

问题：两个导航对应的界面会同时显示，页面被分割成两个独立区域，不符合全屏显示单个界面的需求。

正确解决方案：反向嵌套+全局Drawer入口 #

核心思路是让Tab导航作为用户专属功能的载体，同时将所有页面（包括通用功能）纳入同一个Drawer导航体系，确保底部Tab和Drawer控件始终可访问。

代码实现 #

import 'react-native-gesture-handler';
import { PaperProvider, MD3LightTheme as DefaultTheme } from 'react-native-paper';
import {SafeAreaView, View, Text, TouchableOpacity} from "react-native";
import {StatusBar} from 'expo-status-bar';
import {NavigationContainer, useNavigation} from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

/* *screen imports here* */

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

// 自定义Header，添加Drawer触发按钮
function CustomHeader() {
  const navigation = useNavigation();
  return (
    <View style={{height: 60, backgroundColor: '#800', justifyContent: 'center', paddingLeft: 16}}>
      <TouchableOpacity onPress={() => navigation.openDrawer()}>
        <Text style={{color: 'white', fontSize: 20}}>☰</Text>
      </TouchableOpacity>
    </View>
  );
}

// 用户专属Tab导航
function UserTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen 
        name="Wishes" 
        component={ScreenWishlist} 
        options={{header: () => <CustomHeader />}} 
      />
      <Tab.Screen 
        name="History" 
        component={ScreenHistory} 
        options={{header: () => <CustomHeader />}} 
      />
    </Tab.Navigator>
  );
}

// 根导航：Drawer包裹Tab和通用页面
export default function App() {
  return (
    <View style={{flex:1, backgroundColor:"#800"}}>
      <SafeAreaView style={{flex:1}}>
        <View style={{flex:1, backgroundColor:"#fff"}}>
          <PaperProvider>
            <StatusBar translucent={false} hidden={false} style="light" backgroundColor={'#800'} />
            <NavigationContainer>
              <Drawer.Navigator 
                screenOptions={{
                  header: () => <CustomHeader />
                }}
              >
                {/* 用户专属Tab作为Drawer的一个选项 */}
                <Drawer.Screen name="我的功能" component={UserTabs} />
                {/* 通用页面直接作为Drawer选项 */}
                <Drawer.Screen name="News" component={ScreenNews} />
                <Drawer.Screen name="About" component={ScreenAboutUs} />
              </Drawer.Navigator>
            </NavigationContainer>
          </PaperProvider>
        </View>
      </SafeAreaView>
    </View>
  );
}

关键改进点 #

1. 统一导航体系：所有页面纳入同一个NavigationContainer，避免状态冲突
2. Tab作为Drawer选项：用户专属功能的Tab导航作为Drawer的一个入口，切换到Tab页面时底部导航栏始终存在
3. 全局Drawer触发：所有页面的Header都添加Drawer触发按钮，确保随时可访问通用功能

如果希望通用页面也显示底部Tab栏，可以将News和About添加到Tab导航的某个子栈中，按需调整即可。

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