React Native中require()用动态计算路径报错，求解决方案

React Native（包括Expo）使用的Metro打包器是静态分析资源的，它需要在编译阶段明确知道所有要打包的资源路径。你用模板字符串动态拼接require的路径时，Metro无法提前解析出具体要加载哪个文件，所以会抛出无效调用的错误。而直接写死路径require("./assets/bgm.mp3")时，打包器能直接定位到资源，自然能正常运行。

这里提供两种最直接的可行方案：

方案1：在数据数组中直接存储资源引用 #

修改array.js，把bgm字段从文件名改成require后的资源引用：

const array = [
  {
    id: 1,
    name: "Ken",
    bgm: require("./assets/bgm.mp3"),
  },
];

export default array;

然后在SoundPlayer.js里直接使用这个预加载的资源：

const { sound: newSound } = await Audio.Sound.createAsync(
  array[0].bgm // 直接传入资源引用，无需再调用require
);

方案2：创建资源映射对象管理多音频 #

如果你的项目有多个音频文件，推荐创建一个专门的资源映射文件，统一管理所有音频的require引用：

// audioAssets.js
export default {
  bgm: require("./assets/bgm.mp3"),
  bgm2: require("./assets/bgm2.mp3"),
  // 其他音频资源
};

接着在SoundPlayer.js中导入并使用：

import audioAssets from "./audioAssets";
import array from "./array";

// ...

const { sound: newSound } = await Audio.Sound.createAsync(
  audioAssets[array[0].bgm] // 通过文件名作为key取对应的资源引用
);

这两种方案都是让Metro在编译阶段就能明确找到所有需要打包的音频资源，避免动态路径带来的静态分析失败问题。如果后续需要新增音频，只需要在对应的数组或映射对象中添加新的require引用即可。

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