在应用加载时缓存完整的图像文件夹（React Native Expo）

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（例如：在 webpack 中），并且它在 React Native 中不可用。 这里描述了如何在 React Native 中通过自动化和 Babel 插件来做到这一点。鉴于个人维护者 Babel 插件在 Babel 的微小升级之间似乎无法很好地生存，我强烈建议采用自动化方法，类似于上面链接的文章中所阐述的方法。

不过，就我而言，我可能会这样做bash并将其与我的构建过程联系起来（通过package.jsons "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

抵制调用此脚本的冲动，因为当它到达时，import * as MyAssets from "./assets"这会杀死 tree shake 。

您可以修改该脚本来代替/同时生成对loadAsync的调用，以便预取所有资源。这样的修改留给读者作为练习。