React Native Navigation V5 Stack、BottomTab 和 Drawer Navigation

问题描述

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

我需要导航到事件页面而不添加到底部导航器。

我的问题：

如果我需要将一个组件导航到另一个组件而不将组件添加到底部导航器，这里给出了两个文件的代码 如果需要导航到事件页面，如果我在 Component 我可以导航到 Events Compnents。但它也在底部选项卡导航器中显示我不希望底部导航器中的这个组件。

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",}}
        /> */}
      </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",}}
      >
        <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",}}
      >
        <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",}}
      >
        <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",}}
      >
        <EventsStack.Screen
          name="Events"
          component={Events}
          options={{
            title: "Events",}}
        />
      </EventsStack.Navigator>
    );

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

我需要调用 EventsStackScreen 而不添加到

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）