React Native Expo：能否缓存整个目录而非逐个指定文件路径？

首先直接回答你的问题：Expo/React Native本身不支持直接通过目录名称或**/*.png这类递归通配符批量选择资源进行缓存。这是因为React Native的require机制是静态的，打包工具（比如Metro）在编译阶段需要明确知道每个资源的具体路径，动态的通配符或目录路径无法被静态解析。

不过有两种靠谱的方法可以实现批量缓存资源的需求，不用手动逐个写路径：

方法一：用Babel插件自动解析通配符 #

可以借助babel-plugin-import-glob这类Babel插件，让它在编译时把通配符转换成对应的require语句。

步骤： #

1. 安装插件：

npm install babel-plugin-import-glob --save-dev

2. 在项目根目录的babel.config.js中添加插件配置：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['import-glob']
  };
};

3. 在你的代码中用通配符引入资源：

// 导入指定目录下所有png和mp4文件
import assets from './app/assets/**/*.{png,mp4}';

// 然后直接把assets传给cacheAssets函数
const Assets = cacheAssets(assets);

方法二：写Node脚本自动生成资源列表 #

如果不想依赖Babel插件，可以写一个简单的Node.js脚本，遍历目标目录，自动生成包含所有资源require语句的文件。

示例脚本（比如命名为generateAssetsList.js）： #

const fs = require('fs');
const path = require('path');

// 目标资源目录
const assetsDir = path.join(__dirname, 'app', 'assets');
// 生成的列表文件路径
const outputFile = path.join(__dirname, 'app', 'assetsList.js');

// 需要包含的文件扩展名
const allowedExts = ['.png', '.mp4'];

function traverseDir(dir) {
  let assets = [];
  const files = fs.readdirSync(dir);
  
  files.forEach(file => {
    const fullPath = path.join(dir, file);
    const stats = fs.statSync(fullPath);
    
    if (stats.isDirectory()) {
      // 递归遍历子目录
      assets = [...assets, ...traverseDir(fullPath)];
    } else {
      const ext = path.extname(file).toLowerCase();
      if (allowedExts.includes(ext)) {
        // 生成相对路径（相对于项目根目录）
        const relativePath = path.relative(__dirname, fullPath).replace(/\\/g, '/');
        assets.push(`require('./${relativePath}')`);
      }
    }
  });
  
  return assets;
}

const assetsList = traverseDir(assetsDir);
// 生成导出语句
const content = `export default [\n  ${assetsList.join(',\n  ')}\n];`;

fs.writeFileSync(outputFile, content);
console.log('Assets list generated successfully!');

使用方法： #

1. 运行脚本：

node generateAssetsList.js

2. 在App.js中导入生成的列表：

import assetsList from './app/assetsList';

// 然后在loadResourcesAndDataAsync中使用
const Assets = cacheAssets(assetsList);

每次新增资源后，重新运行脚本即可更新列表。

注意事项 #

• 不管用哪种方法，都要确保资源文件在打包时能被Metro识别，不要把资源放在.gitignore或Metro配置排除的目录里。
• 视频资源和图片资源的缓存逻辑你的代码已经处理了（区分字符串和模块），所以两种方法生成的列表都可以直接传给cacheAssets函数。

内容的提问来源于stack exchange，提问作者Rémi-Antoine Joron