React Native Expo启动时缓存整个图片文件夹的实现方法

我懂你不想手动几百次写require或者import的痛苦！在Expo里批量缓存整个文件夹的图片，其实有两种实用的方法，看你的项目类型来选：

方法一：用Webpack的require.context批量导入（推荐Managed/Bare Webpack项目） #

Expo的Managed workflow默认用Webpack打包，Bare workflow如果也用Webpack的话，这个方法最直接。它能帮你自动匹配指定文件夹下的所有图片，不用逐个引入：

import { Asset } from 'expo-asset';
import AppLoading from 'expo-app-loading';
import { useState } from 'react';

export default function App() {
  const [isReady, setIsReady] = useState(false);

  async function _cacheResourcesAsync() {
    // 创建上下文：匹配./assets/images下的所有图片，不递归子文件夹（如果需要递归改成true）
    const imageContext = require.context('./assets/images', false, /\.(png|jpg|jpeg|gif|svg)$/);
    
    // 把所有图片转为Expo Asset并发起下载缓存
    const cachePromises = imageContext.keys().map(imagePath => {
      // 加载图片模块
      const imageModule = imageContext(imagePath);
      // 转为Expo Asset并缓存
      return Asset.fromModule(imageModule).downloadAsync();
    });

    // 等待所有图片缓存完成
    await Promise.all(cachePromises);
  }

  if (!isReady) {
    return (
      <AppLoading
        startAsync={_cacheResourcesAsync}
        onFinish={() => setIsReady(true)}
        onError={console.warn}
      />
    );
  }

  // 这里渲染你的主应用
  return (
    {/* 你的App内容 */}
  );
}

注意事项： #

• require.context的三个参数分别是：文件夹路径、是否递归子文件夹、匹配文件的正则表达式，你可以根据自己的图片格式和文件夹结构调整。
• 如果你的图片在子文件夹里，把第二个参数改成true就能递归匹配所有子目录的图片。
• 确保正则覆盖了你所有用到的图片格式（比如上面的png|jpg|jpeg|gif|svg）。

方法二：用expo-file-system枚举文件（适合Bare Workflow或自定义文件结构） #

如果你的项目是Bare workflow，或者图片存在设备本地文件系统里，可以用expo-file-system来枚举文件夹里的所有图片，再缓存：

import { Asset } from 'expo-asset';
import AppLoading from 'expo-app-loading';
import * as FileSystem from 'expo-file-system';
import { useState } from 'react';

export default function App() {
  const [isReady, setIsReady] = useState(false);

  async function _cacheResourcesAsync() {
    // 获取图片文件夹的路径（这里假设是项目打包后的assets路径，Bare环境可能需要调整）
    const imagesDir = FileSystem.documentDirectory + 'assets/images/';
    
    // 枚举文件夹里的所有文件
    const fileInfo = await FileSystem.readDirectoryAsync(imagesDir);
    
    // 过滤出图片文件
    const imageFiles = fileInfo.filter(file => /\.(png|jpg|jpeg|gif|svg)$/.test(file));
    
    // 缓存所有图片
    const cachePromises = imageFiles.map(file => {
      const imageUri = imagesDir + file;
      return Asset.fromURI(imageUri).downloadAsync();
    });

    await Promise.all(cachePromises);
  }

  // 后续的AppLoading和渲染逻辑和方法一一致
  if (!isReady) {
    return (
      <AppLoading
        startAsync={_cacheResourcesAsync}
        onFinish={() => setIsReady(true)}
        onError={console.warn}
      />
    );
  }

  return (
    {/* 你的App内容 */}
  );
}

注意事项： #

• 这个方法更适合Bare workflow，因为Managed环境下的assets路径可能和预期不同，需要额外处理。
• 要确保你有访问目标文件夹的权限，必要时添加对应的权限配置。

这两种方法都能帮你避免手动逐个引入几百张图片的麻烦，根据你的项目类型选就行！

内容的提问来源于stack exchange，提问作者lucasboleli