0

我希望在我的应用程序中同时呈现抽屉导航、选项卡导航和堆栈导航。但我收到此错误：

反应导航错误

这是我的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 >
                    )}

我怎样才能解决这个问题？

4

2 回答 2

1

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

于 2020-02-19T17:55:25.077 回答
0

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

DrawerNavigator StackNavigator TabNavigator

然后从您的堆栈导航器标题内部，您可以
手动打开和关闭抽屉

于 2020-02-18T12:00:15.560 回答