Reactnative React Native在同一页面上使用多个不同的导航器

我有一个移动应用程序，该应用程序提供了几个功能.主要有两组功能:用户特定的功能(如愿望列表等)和一般功能(如新闻、关于我们等).我是新的 react native ，我想有这两个组在不同的导航"部分":用户特定的东西应该在BottomTabNavigator以内，而一般的东西应该在DrawerNavigator内.

我的问题与How to use Multiple Navigators in React Native version 6.x非常相似，但与那个问题不同的是，我希望选项卡中有different个元素.

我曾try 将这两个导航器嵌套成一个，如下所示:

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>
    );
}

这里的问题是，在更换了一些屏幕后，我失go 了底部导航器.

我也试过用两个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>
    );
}

这里的问题是，它的渲染就像是有两个不同的屏幕，整个屏幕在中间分割，两个屏幕独立工作.我想一次只渲染一个屏幕，而且应该覆盖整个屏幕-当然，除了导航按钮，我希望所有时间都渲染两个导航控制器按钮.