找不到屏幕“主页”的“组件”或“儿童”道具。如果您传递了“未定义”，就会发生这种情况。react-navigate v5 出错？

Question

我正在尝试使用 react-navigate v5 为四个屏幕设置一个 stacknavigator。目前，我在尝试运行该应用程序时遇到此错误：

我的 App.js：

import React from 'react';
import SafeAreaView from 'react-native-safe-area-view';
import MainStackNavigator from './navigation/Navigator';
import {LocalizationProvider} from './utils/localization/LocalizationContext';
import { NavigationContainer } from '@react-navigation/native';

const App: () => React$Node = () => {
    return (
    <NavigationContainer>
      <LocalizationProvider>
        <MainStackNavigator />
      </LocalizationProvider>
    </NavigationContainer>
    );
};

export default App;

我的 Navigator.js：

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Map} from '../components/Map';
import {HomeScreen} from '../components/HomeScreen';
import {LanguageSettings} from '../components/LanguageSettings';
import {MarkerDetails} from '../components/MarkerDetails';
// import screens

const Stack = createStackNavigator();

function MainStackNavigator() {
    return (
    <Stack.Navigator
      initialRouteName='Home'>
      <Stack.Screen
        name='Home'
        component={HomeScreen}
        />
      <Stack.Screen
        name='LanguageSettings'
        component={LanguageSettings}
        />
      <Stack.Screen
        name='MainMap'
        component={Map}
        />
      <Stack.Screen
        name='MarkerDetails'
        component={MarkerDetails}
        />
    </Stack.Navigator> 
    );
}

export default MainStackNavigator;

和主屏幕本身产生错误（其他屏幕也这样做）：

import React, {useContext} from 'react';
import {
    View,
    Image,
    StyleSheet,
    Dimensions,
    ImageBackground,
    Layout,
    Text,
    Modal,
    Button
} from 'react-native';

const { width, height } = Dimensions.get('window');
const frameWidth = width;
const columnWidth = frameWidth / 3;

class HomeScreen extends React.Component {
    static navigationOptions = {};
    constructor(props) {
    super(props);

    this.state = {
        firstLaunch: null,
        condUpdate: null
    };
    }
///....///
    render() {
    return(
        <View
          style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          margin: 20,
          }}>
        </View>
    );
    }
}

export default HomeScreen;

不知道发生了什么，希望得到一些帮助。谢谢！

Answer 1

这是因为您导出和导入的方式HomeScreen。

如果您export default需要导入整个文件。您的解决方法是更改Navigator.jsfrom 中的导入：

import {HomeScreen} from '../' 到 import HomeScreen from '../'

您将使用解构导入的时间是这样的工作流程：

modules.export = {
    a: apple
    b: banana

}

----

import { a, b } from './fruits.jsx'

Answer 2

this is a problem with the export 

this error occurs when you define the components with default 
like this:-

    import Home from "./Home";
    import Room from "./Room";
    import Hall from "./Hall";
    
    export default{Home, Room, Hall};

so you have to define without it like this:-

    import Home from "./Home";
    import Room from "./Room";
    import Hall from "./Hall";
    
    export{Home, Room, Hall};