时间戳

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

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

问题描述

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

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

标签： javascriptreact-native

解决方案

发生这种情况是因为您导出和导入的方式HomeScreen。

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

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

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

modules.export = {
    a: apple
    b: banana

}

----

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

推荐阅读