javascript - 找不到屏幕 'component' 的 'children' 或 'Home' 属性。如果您传递 'undefined' ，则可能会发生这种情况。 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 的方式所致。

如果您导出默认值，则需要导入整个文件。您的修复方法是将 Navigator.js 中的导入更改为:

从“../”导入{HomeScreen}到从“../”导入主屏幕

<小时/>

使用解构导入的时候，工作流程如下:

modules.export = {
    a: apple
    b: banana

}

----

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