React-native-native expo应用程序下载

Question

，所以我正在使用 create-react-native-app 来构建项目。您可能知道，这在开发应用程序时使用Expo作为框架。

我正在使用expo的filesystem.downloadasync（）下载所需的文件。我需要多个文件要下载，因此我在.map（）内运行此命令，类似的内容：

this.state.files.map(file => {
    FileSystem.downloadAsync(file.url, FileSystem.documentDirectory + file.name)
    .then(({ uri }) => console.log('Saved this file at: ' + uri))
    .catch(console.log('Error when downloading file.'))
})

现在，我知道每个文件何时下载，但是我怎么知道所有文件何时下载？

如果我将其放在功能中并称呼它，它不会等待它完成，它将继续进行下一个代码。

我可以以某种方式使此功能返回一个新的承诺吗？我认为这是一种正确的方法，但是我不确定如何做到这一点？我在哪里放置并拒绝？

Answer 1

看起来您需要Promise.all()！除了一系列的承诺，然后返回一个新承诺，该诺言将在数组中的每个承诺都返回结果后解决。

如果您在此处查看有关预加载和缓存资产的博览会文档，您将看到一个很好的例子。

async _loadAssetsAsync() {
  const imageAssets = cacheImages([
      'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
      require('./assets/images/circle.jpg'),
  ]);
  const fontAssets = cacheFonts([FontAwesome.font]);
  // Notice how they create an array of promises and then spread them in here...
  await Promise.all([...imageAssets, ...fontAssets]);
}

在您的情况下，这样的事情会起作用

const assets = this.state.files.map(file =>
    FileSystem.downloadAsync(file.url, FileSystem.documentDirectory + file.name)
)
/// Here is where you put the try.
try {
  await Promise.all(assets);
} catch (error) {
  /// Here is where you would handle an asset loading error.
  console.error(error)
}
console.log("All done loading assets! :)");