React native React本机导航V5堆栈、底部选项卡和抽屉导航

我在项目中使用了底部、堆栈和抽屉导航

我需要在不添加底部导航器的情况下导航到事件页面

我的问题是：

如果我需要在不将组件添加到底部导航器的情况下将一个组件导航到另一个组件，这里提供了两个文件代码如果需要导航到事件页面，我无法导航如果我在组件内声明事件组件，我可以导航到事件组件。但它也显示在底部选项卡导航器中，我不希望在底部导航器中显示此组件

App.js

import 'react-native-gesture-handler';
    import { StatusBar } from 'expo-status-bar';
    import React from 'react';
    import { StyleSheet, Text, View } from 'react-native';
    import { NavigationContainer } from '@react-navigation/native';
    import { createDrawerNavigator } from '@react-navigation/drawer';
    import {DrawerContent} from './Screens/DrawerContent';
    import {Events} from './Screens/Events'
    import MainTabScreen from './Screens/Bottomtab'
    
    const Drawer = createDrawerNavigator();
    
    
    
    export default function App() {
      return (
        <NavigationContainer>
          <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
            <Drawer.Screen name="Home" component={MainTabScreen} />
          </Drawer.Navigator>
        </NavigationContainer>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });```
    
    BottomTab Screen.js
    
        enter code here
    
    ```
    import React from "react";
    import { createStackNavigator } from "@react-navigation/stack";
    import Icon from "react-native-vector-icons/Ionicons";
    import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
    
    import Home from "./HomeScreen";
    import About from "./AboutUs";
    import Contact from "./ContactUs";
    import Test from "./Test";
    import Events from "./Events";
    
    const HomeStack = createStackNavigator();
    const AboutStack = createStackNavigator();
    const ContactStack = createStackNavigator();
    const TestStack = createStackNavigator();
    const EventsStack = createStackNavigator();
    
    const Tab = createMaterialBottomTabNavigator();
    
    const MainTabScreen = () => (
      <Tab.Navigator
        initialRouteName="Home"
        activeColor="#fff"
        //   style={{ backgroundColor: 'tomato' }}
      >
        <Tab.Screen
          name="Home"
          component={HomeStackScreen}
          options={{
            tabBarLabel: "Home",
            tabBarColor: "#009387",
            tabBarIcon: ({ color }) => (
              <Icon name="ios-home" color={color} size={26} />
            ),
          }}
        />
        <Tab.Screen
          name="ContactUs"
          component={ContactStackScreen}
          options={{
            tabBarLabel: "Notifications",
            tabBarColor: "#1f65ff",
            tabBarIcon: ({ color }) => (
              <Icon name="ios-notifications" color={color} size={26} />
            ),
          }}
        />
        <Tab.Screen
          name="About"
          component={AboutStackScreen}
          options={{
            tabBarLabel: "Profile",
            tabBarColor: "#694fad",
            tabBarIcon: ({ color }) => (
              <Icon name="ios-person" color={color} size={26} />
            ),
          }}
        />
        <Tab.Screen
          name="Test"
          component={TestStackScreen}
          options={{
            tabBarLabel: "Search",
            tabBarColor: "#d02860",
            tabBarIcon: ({ color }) => (
              <Icon name="ios-aperture" color={color} size={26} />
            ),
          }}
        />
    
        {/* <Tab.Screen
          name="Events"
          component={EventsStackScreen}
          options={{
            tabBarLabel: "Search",
            tabBarColor: "#d02860",
            tabBarIcon: ({ color }) => (
              <Icon name="ios-aperture" color={color} size={26} />
            ),
          }}
        /> */}
      </Tab.Navigator>
    );
    export default MainTabScreen;
    
    const HomeStackScreen = ({ navigation }) => (
      <HomeStack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: "#009387",
          },
          headerTintColor: "#fff",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      >
        <HomeStack.Screen
          name="Home"
          component={Home}
          options={{
            title: "Home",
            headerLeft: () => (
              <Icon.Button
                name="ios-menu"
                size={25}
                backgroundColor="#009387"
                onPress={() => navigation.openDrawer()}
              ></Icon.Button>
            ),
          }}
        />
      </HomeStack.Navigator>
    );
    
    const ContactStackScreen = ({ navigation }) => (
      <ContactStack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: "#1f65ff",
          },
          headerTintColor: "#fff",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      >
        <ContactStack.Screen
          name="ContactUs"
          component={Contact}
          options={{
            title: "ContactUs",
            headerLeft: () => (
              <Icon.Button
                name="ios-menu"
                size={25}
                backgroundColor="#1f65ff"
                onPress={() => navigation.openDrawer()}
              ></Icon.Button>
            ),
          }}
        />
      </ContactStack.Navigator>
    );
    const AboutStackScreen = ({ navigation }) => (
      <AboutStack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: "#694fad",
          },
          headerTintColor: "#fff",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      >
        <AboutStack.Screen
          name="About"
          component={About}
          options={{
            title: "AboutUs",
            headerLeft: () => (
              <Icon.Button
                name="ios-menu"
                size={25}
                backgroundColor="#694fad"
                onPress={() => navigation.openDrawer()}
              ></Icon.Button>
            ),
          }}
        />
      </AboutStack.Navigator>
    );
    const TestStackScreen = ({ navigation }) => (
      <TestStack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: "#d02860",
          },
          headerTintColor: "#fff",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      >
        <TestStack.Screen
          name="Test"
          component={Test}
          options={{
            title: "Test",
            headerLeft: () => (
              <Icon.Button
                name="ios-menu"
                size={25}
                backgroundColor="#d02860"
                onPress={() => navigation.openDrawer()}
              ></Icon.Button>
            ),
          }}
        />
      </TestStack.Navigator>
    );
    const EventsStackScreen = ({ navigation }) => (
      <EventsStack.Navigator screenOptions={{
          headerStyle: {
            backgroundColor: "#d02860",
          },
          headerTintColor: "#fff",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      >
        <EventsStack.Screen
          name="Events"
          component={Events}
          options={{
            title: "Events",
            headerLeft: () => (
              <Icon.Button
                name="ios-menu"
                size={25}
                backgroundColor="#d02860"
                onPress={() => navigation.openDrawer()}
              ></Icon.Button>
            ),
          }}
        />
      </EventsStack.Navigator>
    );

导入“反应本机手势处理程序”；
从“博览会状态栏”导入{StatusBar}；
从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react导航/drawer'导入{createDrawerNavigator}；
从“/Screens/DrawerContent”导入{DrawerContent}；
从“/Screens/Events”导入{Events}
从“./Screens/Bottomtab”导入MainTabScreen
const Drawer=createDrawerNavigator（）；
导出默认函数App（）{
返回(
}>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});```
bottomtabscreen.js
在这里输入代码
```
从“React”导入React；
从“@react navigation/stack”导入{createStackNavigator}；
从“反应本机矢量图标/离子图标”导入图标；
从“@react navigation/material bottom tabs”导入{createMaterialBottomTabNavigator}”；
从“/主屏幕”导入主页；
从“/AboutUs”导入关于；
从“/ContactUs”导入联系人；
从“/Test”导入测试；
从“/Events”导入事件；
const HomeStack=createStackNavigator（）；
const AboutStack=createStackNavigator（）；
const ContactStack=createStackNavigator（）；
const TestStack=createStackNavigator（）；
const EventsStack=createStackNavigator（）；
const Tab=createMaterialBottomTabNavigator（）；
常量MainTabScreen=（）=>(
(
),
}}
/>
(
),
}}
/>
(
),
}}
/>
(
),
}}
/>
{/*  (
),
}}
/> */}
);
导出默认主选项卡屏幕；
const HomeStackScreen=（{navigation}）=>(
(
navigation.openDrawer（）}
>
),
}}
/>
);
const ContactStackScreen=（{navigation}）=>(
(
navigation.openDrawer（）}
>
),
}}
/>
);
const AboutStackScreen=（{navigation}）=>(
(
navigation.openDrawer（）}
>
),
}}
/>
);
const TestStackScreen=（{navigation}）=>(
(
navigation.openDrawer（）}
>
),
}}
/>
);
const EventsStackScreen=（{navigation}）=>(
(
navigation.openDrawer（）}
>
),
}}
/>
);

如果需要导航到事件页面，这里给出了两个文件代码。如果在组件中声明事件组件，我将无法导航。我可以导航到事件组件。但它也显示在底部选项卡导航器中。我不希望在底部导航器中使用此组件

我需要调用EventsStackScreen而不添加到