如何在 React Native 6.x 版中使用多个导航器

我刚开始反应原生。我试图在我的应用程序中使用多个导航 - 底部标签导航和抽屉导航。我已成功添加底部选项卡导航，但是当我尝试添加抽屉导航时出现错误：

“另一个导航器已为此容器注册。您可能在单个“导航容器”或“屏幕”下有多个导航器。确保每个导航器都位于单独的“屏幕”容器下。“

我想在我的应用程序中使用两个导航器。

这是我的代码：

底部Tabs.js：

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

import about from "../screens/about";
import home from "../screens/home";
import reviewDetails from "../screens/reviewDetails";

const Tab = createBottomTabNavigator();

const AppNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen
      name="about"
      component={about}
      options={{
        title: "About",
      }}
    ></Tab.Screen>
    <Tab.Screen
      name="home"
      component={home}
      options={{
        title: "Home",
      }}
    ></Tab.Screen>
    <Tab.Screen name="reviewDetails" component={reviewDetails}></Tab.Screen>
  </Tab.Navigator>
);

export default AppNavigator;

抽屉导航.js

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import "react-native-gesture-handler";

import home from "../screens/about";
import about from "../screens/home";

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={home} />
      <Drawer.Screen name="About" component={about} />
    </Drawer.Navigator>
  );
}

应用程序.js

import React from "react";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import BottomTabs from "./navigation/bottomTabs";
import DrawerNavigator from "./navigation/drawerNavigarion";

export default function App() {
  return (
    <>
      <NavigationContainer>
        <BottomTabs></BottomTabs>
        <DrawerNavigator></DrawerNavigator>
      </NavigationContainer>
    </>
  );
}

这是我想要的：

如果我想在图片示例中使用两者，我应该在代码中更改什么？