React Native加载75个MP3文件报错，如何重构加载逻辑？

你遇到的报错是因为打包工具（比如Webpack、Metro这类）在构建阶段需要静态分析所有依赖路径，循环里动态拼接的require(./sounds/${i + 1}.mp3)没法被工具识别成确定的文件路径，所以找不到对应的资源。

对比手写逐个加载的方式，这里给你两种重构方案：

方案一：脚本生成静态require数组 #

如果不想手动写75行require，可以用Node.js写个小脚本自动生成代码：

// 运行这个脚本会输出需要的代码到控制台
for (let i = 1; i <=75; i++) {
  console.log(`require('./sounds/${i}.mp3'),`);
}

把输出的内容直接复制到你的代码里，拼成数组：

const numberFiles = [
  // 粘贴脚本输出的内容
  require('./sounds/1.mp3'),
  require('./sounds/2.mp3'),
  // ... 直到75.mp3
];

这种方式和手写逐个加载效果完全一致，打包工具能正常识别所有依赖，而且不用手动重复写代码。

方案二：用打包工具的批量导入API（支持的情况下） #

如果你的项目用Webpack这类支持require.context的打包工具，可以用上下文批量导入：

// 创建匹配sounds目录下所有数字命名MP3文件的上下文
const soundsCtx = require.context('./sounds', false, /^\d+\.mp3$/);
// 按文件名的数字排序，保证数组顺序是1到75
const numberFiles = soundsCtx.keys()
  .sort((pathA, pathB) => {
    const numA = parseInt(pathA.match(/\d+/)[0], 10);
    const numB = parseInt(pathB.match(/\d+/)[0], 10);
    return numA - numB;
  })
  .map(path => soundsCtx(path));

这个方法会自动加载目录下符合规则的所有MP3文件，不用手动维护每个require。如果是React Native的Metro打包器，因为不支持require.context，优先用方案一。

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