如何在React Navigation v5中同时使用堆栈导航，抽屉导航和标签导航

Question

我希望在我的应用程序中同时渲染抽屉导航，标签导航和堆栈导航。 但我收到此错误：

这是我的root.js文件内容：

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import {Like, Home, Search, Media, Profile, Direct, HeaderProfile, CustomDrawer } from './components/index';
import Icon from 'react-native-vector-icons/FontAwesome';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

此标签导航代码：

const Tab =createMaterialTopTabNavigator();

const MyTabs=()=>{

return(

    <Tab.Navigator>
    <Tab.Screen name="Home" component={Home}/>
    <Tab.Screen name="Search" component={Search} />
    <Tab.Screen name="Media" component={Media} />
    <Tab.Screen name="Like" component={Like} />
    <Tab.Screen name="Profile" component={Profile} />

  </Tab.Navigator>
)}

这是抽屉的导航代码：

onst Drawer = createDrawerNavigator();

const MyDrawer=()=> {
  return (

      <Drawer.Navigator>

        <Drawer.Screen name="Home" component={Home} />

      </Drawer.Navigator>

  );}

此堆栈导航代码：（我已将上述两个组件导入堆栈导航）

        const Stack= createStackNavigator();

        const MainStack=()=>{

        return(

        <NavigationContainer>
        <Stack.Navigator>

        <Stack.Screen name="MyTabs" component={MyTabs} options={{headerShown:false}}  />
        <Stack.Screen name="MyDrawer" component={MyDrawer}   />
        <Stack.Screen name="Direct" component={Direct} />


        </Stack.Navigator>
        </NavigationContainer>

        )}

我应该说，当我删除抽屉式导航时，一切正常，没有任何问题

这是我用来在profile.js中打开抽屉的代码：

const HeaderProfile = (props) => {

const {navigation}=props;


    return (


            <View >

                <TouchableWithoutFeedback
                onPress={()=>navigation.openDrawer()}

                />
           </View >
                    )}

我该如何解决？

Answer 1

我整整一个星期都在为同样的问题而苦苦挣扎。是的，我是初学者，但是这个youtube视频对我有所帮助。 （React Native＃21：React Navigation（新版本）混合选项卡+抽屉+堆栈）https://www.youtube.com/watch?v=z7wZSA176kE

Answer 2

我无法理解您使用HeaderProfile的位置
但是您想要实现的过程很简单，只需使用以下结构：

DrawerNavigator StackNavigator TabNavigator

然后从堆栈导航器标题中打开并
手动关闭抽屉

Answer 3

尝试从DrawerActions导入openDrawer

import { DrawerActions } from 'react-navigation';

然后

onPress={()=>DrawerActions.openDrawer()}