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

Question

I'm trying to use react-navigate v5 to setup a stacknavigator for four screens. Currently I'm getting this error while trying to run the app:

My 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;

My 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;

And the home screen itself that's generating the error (the other screens do too):

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;

Not sure what's going on, would appreciate some help. Thanks!

Answer 1

This is happening because of the way you export and import HomeScreen .

If you export default you need to import the entire file. Your fix would be to change the import in the Navigator.js from:

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

---

A time you would use the destructuring import is with a workflow like so:

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};