React native 在react native中出现多导航问题（无法打开多个选项卡上的抽屉）

我在react native中在同一屏幕上实现了两个抽屉

    import React, { Component } from "react";
import {
  Text,
  View,
  StyleSheet,
  StatusBar,
  TouchableOpacity,
  Image,
} from "react-native";
import { Feather, FontAwesome } from "@expo/vector-icons";
import { useIsDrawerOpen } from "@react-navigation/drawer";
import { DrawerActions } from "@react-navigation/native";

const Header = (props) => {
  return (
    <View style={styles.container}>
      <View
        style={{
          padding: 10,
          width: "15%",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <TouchableOpacity onPress={() => props.navigation.dangerouslyGetParent().openDrawer()}>
          <Feather name="menu" size={30} color="black" />
        </TouchableOpacity>
      </View>
      <View
        style={{
          padding: 5,
          width: "70%",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <TouchableOpacity
        
       onPress={()=>{props.navigation.navigate('HomeScreen')}}
        
        >

        <Image
          style={{ height: 50, width:250 , resizeMode: "contain" }}
          source={require("../images/Scuba-Diver.png")}
          />
          </TouchableOpacity>
      </View>
      <View
        style={{
          width: "15%",
          padding: 10,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <TouchableOpacity onPress={()=>props.navigation.openDrawer()}>

        <FontAwesome name="search" size={30} color="black" />
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    width: "100%",
    marginTop: StatusBar.currentHeight,
    height: 60,
    flexDirection: "row",
    borderBottomColor:'grey',
    borderBottomWidth:0.3,
  
  },
});
export default Header;

import React，{Component}来自“React”；
进口{
文本，
看法
样式表，
状态栏，
可触摸不透明度，
形象,，
}从“反应本族语”；
从“@expo/vector icons”导入{Feather，FontAwesome}”；
从“@react导航/drawer”导入{useIsDrawerOpen}”；
从“@react-navigation/native”导入{DrawerActions}”；
常数头=（道具）=>{
返回(
props.navigation.DangerlyGetParent（）.openDrawer（）}>
{props.navigation.navigate（'HomeScreen'）}
>
props.navigation.openDrawer（）}>
);
};
const styles=StyleSheet.create({
容器：{
背景颜色：“白色”，
宽度：“100%”，
marginTop:StatusBar.currentHeight，
身高：60，
flexDirection:“行”，
borderBottomColor:“灰色”，
边框底部宽度：0.3，
},
});
导出默认标题；

每当我按下右键右抽屉打开，当我按下左键左抽屉打开时，它工作正常。但是只有当我在没有底部选项卡导航器的屏幕上时才会发生这种情况，如果我在有底部选项卡导航器的屏幕上，两个屏幕上唯一打开的右抽屉。 下面是我的routes.js代码

import React, { useEffect } from "react";
import {
  Button,
  View,
  Text,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";
import {
  createDrawerNavigator,
  DrawerView,
  DrawerNavigatorItems,
} from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
// import {DrawerNavigatorItems} from 'react-navigation-drawer';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";
import { Ionicons, FontAwesome } from "@expo/vector-icons";
import News from "../Pages/News";
import Article from "../Pages/ArticleDescription";
import UnderWater from "../Pages/UnderwaterPhoto";
import Diving from "../Pages/Diving";
import Gear from "../Pages/Gear";
import WorldDives from "../Pages/WorldDives";
import HolidayDeals from "../Pages/HolidayDeals";
import Youtube from "../Pages/Youtube";
import Blog from "../Pages/Blog";
import Articles from "../Pages/Articles";
import Header from "../components/Header";
import Home from "../Pages/Home";
import ArticleDescription from "../Pages/ArticleDescription";
import CustomDraw from "./Drawer";
import SearchDrawer from "./SearchDrawer";
import About from "../Pages/About";
import { Provider } from "react-redux";
import store from "../../store";
import Videos from "../Pages/Videos";
import NewsLetter from "../Pages/Newsletter";
import HeaderTitle from "../components/HeaderTitle";
import Newtest from "../Pages/News";
import {
  fetchPosts,
  fetchUKPosts,
  fetchUSAPosts,
  fetchDivingPosts,
  fetchFeturedPosts,
  fetchGearPosts,
  fetchHolidayDeals,
  fetchMagazinePosts,
  fetchNewsPosts,
  fetchUnderPosts,
  fetchUnderWater,
} from "../../src/actions/postActions";
import { Icon } from "native-base";

function HomeScreen() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: "blue",
        inactiveTintColor: "gray",
        allowFontScaling: true,
        tabStyle: {
          alignItems: "center",
          justifyContent: "center",
        },
      }}
    >
      <Tab.Screen name="News" component={NewsScreen} />
      <Tab.Screen name="Articles" component={Articles} />
      <Tab.Screen name="Youtube" component={Videos} />
      <Tab.Screen name="News Letter" component={NewsLetter} />
    </Tab.Navigator>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>No New Notifications!</Text>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

function LogoLeft({ navigation }) {
  return (
    <View
      style={{ justifyContent: "center", alignItems: "center", padding: 5 }}
    >
      <TouchableOpacity
        onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
      >
        <FontAwesome name="bars" size={30} color="black" />
      </TouchableOpacity>
    </View>
  );
}
const LogoRight = () => {
  return (
    <View
      style={{ justifyContent: "center", alignItems: "center", padding: 5 }}
    >
      <FontAwesome name="search" size={30} color="black" />
    </View>
  );
};
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

function NewsScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="News"
        options={{
          //     headerTitle: (props) => <HeaderTitle {...props} />,
          // headerLeft: (props) => <LogoLeft {...props} />,
          // headerRight: (props) => <LogoRight {...props} />,

          headerShown: false,
        }}
        component={News}
      />
      <Stack.Screen
        options={{
          // headerTitle: (props) => <HeaderTitle {...props} />,
          // headerLeft: (props) => <LogoLeft {...props} />,
          // headerRight: (props) => <LogoRight {...props} />,
          headerShown: false,
        }}
        name="Article"
        component={Article}
      />
      <Stack.Screen
        name="ArticleDescription"
        title={"Article Description"}
        options={{
          headerShown: false,
        }}
        component={ArticleDescription}
      />
    </Stack.Navigator>
  );
}

function RightDrawer() {
  return (
    <Drawer.Navigator
      options={{
        headerTitle: (props) => <HeaderTitle {...props} />,
        headerLeft: (props) => <LogoLeft {...props} />,
        headerRight: (props) => <LogoRight {...props} />,
      }}
      drawerType="slide"
      drawerStyle={{
        width: "100%",
      }}
      drawerContent={(props) => <SearchDrawer {...props} />}
      initialRouteName="HomeScreen"
      drawerPosition="right"
    >
      <Drawer.Screen name="HomeScreen" component={HomeScreen} />

      <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      <Drawer.Screen name="News" component={News} />

      <Drawer.Screen name="UnderWater" component={UnderWater} />
      <Drawer.Screen name="Diving" component={Diving} />
      <Drawer.Screen name="Gear" component={Gear} />
      <Drawer.Screen name="WorldDives" component={WorldDives} />
      <Drawer.Screen name="HolidayDeals" component={HolidayDeals} />
      <Drawer.Screen name="Blog" component={Blog} />
      <Drawer.Screen name="Description" component={Article} />
      <Drawer.Screen name="About" component={About} />
    </Drawer.Navigator>
  );
}
export default function App(props) {
  useEffect(() => {
    store.dispatch(fetchUSAPosts());
    store.dispatch(fetchUKPosts());
    store.dispatch(fetchPosts());
    store.dispatch(fetchUnderWater());
    store.dispatch(fetchUnderPosts());
    store.dispatch(fetchNewsPosts());
    store.dispatch(fetchMagazinePosts());
    store.dispatch(fetchHolidayDeals());
    store.dispatch(fetchGearPosts());
    store.dispatch(fetchFeturedPosts());
    store.dispatch(fetchDivingPosts());
  }, []);

  return (
    <Provider store={store}>
      <SafeAreaView style={{ width: "100%", flex: 1 }}>
        <NavigationContainer>
          <Drawer.Navigator
            drawerType="slide"
            drawerStyle={{
              width: "100%",
            }}
            drawerContent={(props) => <CustomDraw {...props} />}
            initialRouteName="Home"
          >
            <Drawer.Screen name="Home" component={RightDrawer} />
            <Drawer.Screen
              name="Notifications"
              component={NotificationsScreen}
            />
          </Drawer.Navigator>
        </NavigationContainer>
      </SafeAreaView>
    </Provider>
  );
}

import React，{useffect}来自“React”；
进口{
按钮
看法
文本，
可触摸不透明度，
安全区域视图，
}从“反应本族语”；
进口{
createDrawerNavigator，
抽屉视图，
抽屉式活力项目，
}来自“@react导航/抽屉”；
从“@react-navigation/native”导入{NavigationContainer}”；
//从'react navigation drawer'导入{DrawerNavigationItems}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}”；
从“@react navigation/stack”导入{createStackNavigator}；
从“@expo/vector icons”导入{Ionicons，FontAwesome}”；
从“./页面/新闻”导入新闻；
从“./Pages/ArticleDescription”导入文章；
从“./页/水下照片”导入水下；
从“./页面/潜水”导入潜水；
从“./Pages/Gear”导入齿轮；
从“./页面/世界潜水”导入世界潜水；
从“./页/HolidayDeals”导入HolidayDeals；
从“./Pages/Youtube”导入Youtube；
从“./页面/博客”导入博客；
从“./页/文章”导入文章；
从“./组件/标题”导入标题；
从“./页面/主页”导入主页；
从“./Pages/ArticleDescription”导入ArticleDescription；
从“/Drawer”导入CustomDraw；
从“/SearchDrawer”导入SearchDrawer；
从“./Pages/About”导入关于；
从“react redux”导入{Provider}；
从“../../store”导入存储；
从“./页面/视频”导入视频；
从“./页面/新闻稿”导入新闻稿；
从“./组件/标题”导入标题；
从“./页面/新闻”导入新测试；
进口{
回帖，
发帖,，
给我们发帖子，
拿着这些邮票，
获取FeturedPosts，
取变速杆，
度假交易，
让我们一起去看杂志，
获取新闻帖子，
取回底柱，
在水下,，
}来自“../../src/actions/postActions”；
从“本机基”导入{Icon}；
功能主屏幕（）{
返回(
);
}
函数通知屏幕（{navigation}）{
返回(
没有新的通知！
navigation.goBack（）}title=“回家”/>
);
}
函数LogoLeft（{navigation}）{
返回(
navigation.dispatch（DrawerActions.openDrawer（））}
>
);
}
常量LogoRight=（）=>{
返回(
);
};
const Stack=createStackNavigator（）；
const Tab=createBottomTabNavigator（）；
const Drawer=createDrawerNavigator（）；
函数newscreen（）{
返回(
,
//头部左侧：（道具）=>，
//头灯：（道具）=>，
校长：错，
}}
组件={News}
/>
,
//头部左侧：（道具）=>，
//头灯：（道具）=>，
校长：错，
}}
name=“物品”
组件={Article}
/>
);
}
函数RightDrawer（）{
返回(
,
头部左侧：（道具）=>，
头灯：（道具）=>，
}}
抽屉类型=“幻灯片”
抽屉式={{
宽度：“100%”，
}}
抽屉内容={（道具）=>}
initialRouteName=“主屏幕”
抽屉位置=“右”
>
);
}
导出默认功能应用程序（道具）{
useffect（（）=>{
store.dispatch（fetchUSAPosts（））；
store.dispatch（fetchUKPosts（））；
store.dispatch（fetchPosts（））；
store.dispatch（fetchUnderWater（））；
store.dispatch（fetchUnderPosts（））；
store.dispatch（fetchNewsPosts（））；
store.dispatch（fetchMagazinePosts（））；
store.dispatch（fetchHolidayDeals（））；
store.dispatch（fetchGearPosts（））；
dispatch（fetchFeturedPosts（））；
store.dispatch（fetchDivingPosts（））；
}, []);
返回(
}
initialRouteName=“主页”
>
);
}