javascript - 抽屉导航器内的堆栈导航器出现错误

问题描述

我正在尝试使用 react-navigation(Version: 5.x) 但在使用嵌套导航时出现错误，即在抽屉导航中使用堆栈导航。错误是：

Error: Couldn't find a 'component' or 'children' prop for the screen 'Home'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.

import React, { Component } from 'react';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import Dishdetail from './DishdetailComponent';
import { View, Platform } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import Constants from 'expo-constants';

const MenuStack = createStackNavigator();
const HomeStack = createStackNavigator();
const Drawer = createDrawerNavigator();

function MenuNavigator()
{
    return(
        <MenuStack.Navigator
            initialRouteName = "Menu"
            screenOptions = {{
                headerStyle: {backgroundColor: '#512DA8'},
                headerTintColor: '#fff',
                headerTitleStyle: {
                    color: '#fff'
                }
            }}
        >
            <MenuStack.Screen
                name = "Menu"
                component = {Menu}
                options = {{title: 'Menu'}}
            />
            <MenuStack.Screen
                name = "Dishdetail"    
                component = {Dishdetail}
                options = {{title: 'Dish Details'}}
            />
        </MenuStack.Navigator>
    );
}

function HomeNavigator()
{
    return(
        <HomeStack.Navigator
            screenOptions = {{
                headerStyle: {backgroundColor: '#512DA8'},
                headerTintColor: '#fff',
                headerTitleStyle: {
                    color: '#fff'
                }
            }}
        >
            <HomeStack.Screen name = "Home" component = {Home} options = {{title: 'Home'}}/>
        </HomeStack.Navigator>
    );
}

function MainNavigator()
{
    return(
        <NavigationContainer>
            <Drawer.Navigator
                screenOptions = {{
                    drawerBackgroundColor: '#D1C4E9'
                }}    
            >
                <Drawer.Screen name = "Home" Component = {HomeNavigator} options = {{ drawerLabel: 'Home' }}/>
                <Drawer.Screen name = "Menu" Component = {MenuNavigator} options = {{ drawerLabel: 'Menu' }}/>        
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

export default function Main()
{
    return(
        <View style = {{ flex: 1, paddingTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight }}> 
            <MainNavigator />
        </View>
    );
}

这是 HomeComponent.js：

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class Home extends Component
{
    constructor(props)
    {
        super(props);

    }

    render() {
        return(
            <View>
                <Text>Home Component</Text>
            </View>
        );
    }

}

export default Home;

我浏览了这个网站，发现 Home 和 Menu 应该只像我写的那样导入，因为我将它们导出为export default Home;

我是新来的，所以如果有什么问题，请帮助我。

标签： javascriptreactjsreact-nativereact-navigationnavigation-drawer

javascript - 抽屉导航器内的堆栈导航器出现错误

问题描述

解决方案

推荐阅读