Question

我正在用React Native和Expo编写一个简单的应用程序。

此应用程序具有约10张中小型图像，这些图像在应用程序内的不同位置使用。

从我阅读的内容来看，除非我缓存了这些图像，否则每次都需要从博览会上下载。

基于这个原因，我注意到在测试应用程序时它们加载速度似乎非常缓慢。构建并浏览该应用程序后，我发现即使在页面的其余部分加载后，我的图像仍需要花费几秒钟的时间弹出。

我followed the setup as seen in the starting template.

这是我的App.js的外观（我正在使用react-navigation，因此与上面的示例文件有所不同）：


export default class App extends React.Component {
  state = {
    isLoadingComplete: false
  };
  componentDidMount() {
    StatusBar.setHidden(true);
  }
  render() {
    _loadResourcesAsync = async () => {
      return Promise.all([
        Asset.loadAsync([
          require("./assets/syria.png"),
          require("./assets/lebanon.png"),
          require("./assets/kenya.png"),
          require("./assets/indonesia.png"),
          require("./assets/somalia.png"),
          require("./assets/india.png"),
          require("./assets/america.png"),
          require("./assets/albania.png"),
          require("./assets/bosnia.png")
        ])
      ]);
    };
    _handleLoadingError = error => {
      Alert.alert(error);
    };

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

    if (this.state.isLoadingComplete == false) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <AppContainer
          ref={navigatorRef => {
            NavigationService.setTopLevelNavigator(navigatorRef);
          }}
        />
      );
    }
  }
}

为了简洁起见，我已排除了我的反应导航代码。

运行此命令时，我的应用卡在Downloading JavaScript bundle 100.00%上。

似乎_handleFinishLoading从未运行。至少，这是我可以看到它从未完成加载的唯一原因。

鉴于图像数量很少，我不知道这可能要花一秒钟以上的时间。相反，它永远位于初始屏幕上。

关于我在这里做错什么的任何想法吗？

Answer 1

找到了解决方案：

我犯了一个简单的错误。异步函数（_loadResourcesAsync，_handleFinishLoading等）必须位于render方法之外。将它们移到应用类内部的我的render方法之下会导致此方法按预期工作。

在React-Native expo应用程序中预加载资产永远不会完成

1 个答案: