React Native Expo“加载时AppLoading抛出意外错误”错误答案

【问题标题】：React Native Expo “AppLoading threw an unexpected error when loading” errorReact Native Expo“加载时AppLoading抛出意外错误”错误
【发布时间】：2020-06-03 12:39:11
【问题描述】：

我有一个带有 Expo 的 React Native 项目，我在我的 Android 手机上安装了 Expo 客户端。到目前为止，它曾经运行良好。但是即使我没有更改任何代码，当我从手机扫描二维码时，我现在也会收到以下错误。此错误显示在终端上，手机屏幕保持空白。

    import React from 'react';
import { Image } from 'react-native';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import { Block, GalioProvider } from 'galio-framework';

import Screens from './navigation/Screens';
import { Images, articles, ditsTheme } from './constants';

// cache app images
const assetImages = [
  Images.Onboarding,
  Images.LogoOnboarding,
  Images.Logo,
  Images.Pro,
  Images.DITSLogo,
  Images.iOSLogo,
  Images.androidLogo
];

// cache product images
articles.map(article => assetImages.push(article.image));

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

export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  }

  render() {
    if(!this.state.isLoadingComplete) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <GalioProvider theme={ditsTheme}>
          <Block flex>
            <Screens />
          </Block>
        </GalioProvider>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      ...cacheImages(assetImages),
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
     warn(error);
  };

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

}

我该如何解决这个错误？

【问题讨论】：

你用的是什么手机？它在什么手机上运行良好？这通常意味着 AppLoading 异步函数中出现故障。
我在 Android Emulator 和另一个 android 设备上运行一个应用程序，但在两个设备上都出现错误。
但是您说“它可以在另一部手机上无缝运行。”。哪部手机？
是的，它正在工作，但现在它只会在每部手机和模拟器中出现错误
可以分享一下你startAsync函数的内容吗？

标签： react-native expo

【解决方案1】：

在您的_handleLoadingError 方法中，您使用的是warn。虽然您应该使用console.warn。这就是破坏您的应用的原因。

【讨论】：

【解决方案2】：

我收到此错误，问题出在 AppLoading 上。问题原来是我从

调用的函数名称不正确

注意下面，我使用的是 Font.loadAsync（缺少 c），修复它可以正确加载字体。

const getFonts = () =>  Font.loadAsyn({
      'nanitu-regular' : require('./assets/fonts/EastSeaDokdo-Regular.ttf'),
      'nanitu-bold' : require('./assets/fonts/NanumBrushScript-Regular.ttf')
  })

;

【讨论】：