React.createElement：类型无效——需要一个字符串 [Expo42 - React Navigation 4]

Question

我刚刚将我的项目从 expo 39 更新到 42。该项目使用 React Navigation 4。 在更新之前一切正常，现在我得到了恼人的错误：

警告：React.createElement：类型无效 - 需要一个字符串（用于内置组件）或类/函数（用于复合 组件）但得到：未定义。您可能忘记导出您的 来自定义它的文件中的组件，或者您可能混淆了 默认和命名导入。

在 App.js:89 检查您的代码。

在 App 中（由 ExpoRoot 创建）

在 ExpoRoot 中（在 renderApplication.js:45）

在 RCTView 中（在 View.js:34）

在视图中（在 AppContainer.js:106）

在 DevAppContainer 中（在 AppContainer.js:121）

在 RCTView 中（在 View.js:34）

在视图中（在 AppContainer.js:132）

在 AppContainer 中（在 renderApplication.js:39 处）

App.js

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { GlobalColor } from './src/config/helpers';
import { AppContainer } from './src/config/navigation.js';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';

function cacheImages(images) {
    return images.map(image => {
        if (typeof image === 'string') {
            return Image.prefetch(image);
        } else {
            return Asset.fromModule(image).downloadAsync();
        }
    });
}

function cacheFonts(fonts) {
    return fonts.map(font => Font.loadAsync(font));
}

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoadingComplete: false,
        };
    }

    async _loadAssetsAsync() {
        const imageAssets = cacheImages([
            ...
        ]);
        const fontAssets = cacheFonts([{
            ...
        }]);

        await Promise.all([...imageAssets, ...fontAssets]);
    }

    _handleLoadingError = error => {
        // do something
    };

    _handleFinishLoading = () => {
        this.setState({ isLoadingComplete: true });
    };

    componentDidMount() {}

    render() {
        if (!this.state.isLoadingComplete) {
            return (
                <AppLoading
                    startAsync={this._loadAssetsAsync}
                    onFinish={this._handleFinishLoading}
                    onError={this._handleLoadingError}
                />
            );
        } else {
            return (
                <View style={styles.container}>
                    <AppContainer />
                </View>
            );
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: GlobalColor.white,
        justifyContent: 'center',
    },
});

导航.js

import { ScreenWidth, EaseOutQuint } from '../config/helpers';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// Main Screens
import ...

// Account Screens
import ...

...
...

const AppStack = createSwitchNavigator({
    SplashView : SplashView,
    UserLoggedOut : OriginStack,
    UserLoggedIn: MainStack,
},{
    headerMode: 'none',
});

export const AppContainer = createAppContainer(AppStack);

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/netinfo": "6.0.0",
    "expo": "^42.0.0",
    "expo-haptics": "~10.1.0",
    "firebase": "8.2.3",
    "node-fetch": "^2.6.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-page-control": "^1.1.1",
    "react-native-reanimated": "~2.2.0",
    "react-native-web": "^0.17.1",
    "react-native-webview": "11.6.2",
    "react-navigation": "^4.0.1",
    "react-navigation-stack": "^1.5.4"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "babel-preset-expo": "8.3.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.24.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^1.7.0"
  },
  "private": true
}

Answer 1

AppLoading 没有更新到最新版本，所以必须运行

expo install expo-app-loading

然后更改导入

import AppLoading from 'expo-app-loading';

Answer 2

尝试安装以下依赖项

npm i expo-asset
npm i expo-font

Answer 3

错误信息说：

警告：React.createElement：类型无效——需要一个字符串 （对于内置组件）或类/函数（对于复合 组件）但得到：未定义。

这意味着一个组件被引用但不存在（因此undefined，当 React 尝试验证类型时）。

错误消息还指向App.js 中的line 89。查看那里的代码并从那里跟踪它。

检查那里引用的任何组件是否正确导出/导入。如果组件又包含其他导入的组件，请检查这些是否也包含。

大多数情况下，这是由于不正确的导出/导入，但还有一些其他原因也可能导致此错误：

• 与组件同名但文件扩展名不同的文件冲突。

  在这种情况下，请在导入语句中指定扩展名。

• 不正确地将组件作为属性传递。

  在这种情况下，请检查您传递的组件是否具有正确的语法，并事先检查组件以检查其类型是否正确。