如何在 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

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