时间戳

首页 > 解决方案 > 在应用程序加载时缓存完整的图像文件夹（React Native Expo）

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

问题描述

我想在显示启动画面时缓存数百张图像。

遵循以下指南：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() 上的完整文件夹？

标签： react-nativeexpo

解决方案

您正在寻找的东西被称为dynamic imports（例如：在 webpack 中），它在 React Native 中不可用。 这里描述了如何在 React Native 中通过自动化和 Babel 插件来做到这一点。鉴于单个维护者 Babel 插件似乎在 Babel 的微小升级之间不能很好地生存，我强烈建议采用自动化方法，类似于上面链接的文章中的内容。

不过，就我而言，我可能会这样做并将其bash绑定到我的构建过程中（通过package.json's "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"，因为它会在它到达时杀死摇晃树。

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

推荐阅读