React Native (Android)：找不到 'component'、'getComponent' 或 'children' 屏幕道具 'Home'

Question

希望有人能提供帮助，因为我正在努力了解问题所在。

当使用 react-native-navigation 创建堆栈导航器时，无论我使用什么方法导出和导入组件以传递到，似乎都会抛出以下错误.

React Native Issue

堆栈跟踪

Error: Couldn't find a 'component', 'getComponent' 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.

看到此堆栈跟踪后，我执行了 console.log() 并传入了组件，只是为了查看是否返回了 undefined。事实并非如此。我可以看到 HomeComp 组件，例如 be

package.json

  "name": "myApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.8.0",
    "@react-navigation/stack": "^5.10.0",
    "axios": "^0.21.0",
    "body-parser": "^1.19.0",
    "connect-flash": "^0.1.1",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-validator": "^6.6.1",
    "mongoose": "^5.10.10",
    "react": "16.13.1",
    "react-native": "0.63.3",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-reanimated": "^1.13.1",
    "react-native-safe-area-context": "^3.1.8",
    "react-native-screens": "^2.12.0"
  },
  "devDependencies": {
    "@babel/core": "7.12.3",
    "@babel/runtime": "7.12.1",
    "@react-native-community/eslint-config": "1.1.0",
    "babel-jest": "25.5.1",
    "eslint": "6.8.0",
    "jest": "25.5.4",
    "metro-react-native-babel-preset": "0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

HomeComp.js

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Text, FlatList } from 'react-native';

function HomeComp() {



    return (
        <View>
            <Text>Welcome!</Text>
        </View>
    )

}

const styles = StyleSheet.create({
    container: {
        //paddingTop: 30,

    },
    text: {
        fontSize: 20,
        margin: 10
    },
})

export default HomeComp;

app.js

import React, { Component  } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import HomeComp from './src/components/HomeComp';
// import  StatefulComponent  from './src/components/api_comp';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
// To see all the requests in the chrome Dev tools in the network tab.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
    GLOBAL.originalXMLHttpRequest :
    GLOBAL.XMLHttpRequest;

// fetch logger
global._fetch = fetch;
global.fetch = function (uri, options, ...args) {
    return global._fetch(uri, options, ...args).then((response) => {
        console.log('Fetch', { request: { uri, options, ...args }, response });
        return response;
    });
};

function test(){
    return(
    <View>
        <Text>home page</Text>
    </View>
    );
}

console.log({HomeComp})


export default class App extends Component {


    render() {
    Stack = createStackNavigator();

        return (
            <NavigationContainer>
                <Stack.Navigator>
                
                    <Stack.Screen
                        name="Home"
                        Component={HomeComp}
                    />

                    <Stack.Screen 
                        name="test"
                        Component={test}
                    />
                </Stack.Navigator>
            </NavigationContainer>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#1c8282'
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
}); ```

Answer 1

问题是您使用的是 'Component' 而不是 'component'

您必须将道具名称更改为简单的大小写

               <Stack.Screen
                    name="Home"
                    component={HomeComp}
                />

                <Stack.Screen 
                    name="test"
                    component={test}
                />

由于未在导航器中传递未定义的组件属性，这就是您收到错误的原因

React Native (Android)：找不到 'component'、'getComponent' 或 'children' 屏幕道具 'Home'

React Native (Android): Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'Home'

react-native

react-native-android

react-native-navigation