Question

我希望在显示初始屏幕时缓存数百张图像。

遵循以下指南：https://docs.expo.io/versions/latest/sdk/app-loading#__next

我不想一个一个地输入：

 async _cacheResourcesAsync() {
    const images = [
      require('./assets/images/image1.png'),
      require('./assets/images/image2.png'),
      require('./assets/images/image3.png'),
      require('./assets/images/image4.png'),
      require('./assets/images/image5.png'),
      require('./assets/images/image6.png'),
      ...
    ];

    const cacheImages = images.map((image) => {
      return Asset.fromModule(image).downloadAsync();
    });
    return Promise.all(cacheImages)

  }

我注意到我不能做（./assets/images/*）这样的事情：

async _cacheResourcesAsync() {
        const images = [
          require('./assets/images/*')
          ...
        ];
}

有没有办法在_cacheResourcesAsync（）上引用完整文件夹？

Answer 1

您要查找的内容称为dynamic imports（例如：in webpack），它在React Native中不可用。 Here is a description of how you can do that in React Native, both through automation and through a Babel plugin。鉴于单个维护者的Babel插件即使在Babel的较小升级之间似乎也无法很好地生存，因此我强烈建议采用自动化方法，类似于上面链接的文章中所介绍的那样。

不过，就我而言，我可能会在bash中完成并将其绑定到我的构建过程中（通过package.json的{{1}}）。就像这样：

"scripts"

请不要像#!/bin/bash -exu # The paths are relative to the script's parent directory. DIRS_TO_BUILD=( ./src/res ./images ./assets ); cd `dirname $0` HEREDIR=`pwd` for DIR in "${DIRS_TO_BUILD[@]}" do cd "$HEREDIR/$DIR" rm index.js FILES=`ls -1QBb | grep -E '.js($|x|on)' | sort -u` for FILE in $FILES do if [ -f "$FILE" ] then BASENAME=`basename "$FILE" .js` BASENAME=`basename "$BASENAME" .jsx` BASENAME=`basename "$BASENAME" .json` echo "export const $BASENAME = require(\"./$FILE\");" >> index.js fi done done这样调用该脚本，因为这会杀死摇摇晃晃的when it arrives。

您可以修改该脚本以代替/也可以生成对loadAsync的调用，以预取所有资产。这样的修改留给读者练习。

Answer 2

代替缓存

一种简单有效的方法是将您的资产捆绑在app.JSON文件中。因此，当您进行构建时，这些图像也将出现在构建中，并且该应用程序不必在亚马逊CDN中搜索那些图像。这肯定会增加您的文件大小，但会使资产脱机并重新加载更快。

在apploading上缓存完整图像文件夹（React Native Expo）

2 个答案: