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

Question

我正在尝试使用 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;

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

Answer 1

好的，问题很简单，您使用的是 Component = {HomeNavigator} 而不是 component = {HomeNavigator} 它不是大写 c 更改它应该可以工作。 您的导出也是正确的。