Как использовать стековую навигацию, навигацию по ящикам и навигацию по вкладкам одновременно в реагирующей навигации 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

Попробуйте импортировать openDrawer из DrawerActions

import { DrawerActions } from 'react-navigation';

затем

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

Answer 3

Я не могу отменить то, что вы использовали HeaderProfile
, но то, что вы хотите достичь, просто, просто используйте следующую структуру:

DrawerNavigator StackNavigator TabNavigator

затем изнутри стека Заголовок навигатора можно открыть и
закрыть ящик вручную