如何在Expo React Native开发客户端构建中打包离线MP3资源

Dev-Client与生产构建的资源打包说明 #

• Dev-Client默认开发模式下依赖本地开发服务器拉取资源，方便热更新调试。要强制将MP3打包进Dev-Client APK，需配置好资源规则后，使用本地构建（expo run:android）或EAS Build构建Dev-Client，而非依赖Expo Go的远程加载机制。
• 生产构建（expo build:android或EAS Build）只要资源配置正确，会自动将所有匹配的MP3打包进最终APK，无需额外操作。

实现步骤 #

1. 配置资源打包规则 #

在项目根目录的app.json中添加assetBundlePatterns，指定需要打包的MP3文件路径：

{
  "expo": {
    // 其他原有配置...
    "assetBundlePatterns": [
      "assets/audio/**/*.mp3" // 匹配assets/audio目录下所有MP3文件
    ]
  }
}

2. 获取音频文件的正确本地路径 #

不能直接将require()的返回值作为uri传入Audio.loadAsync，需通过expo-asset库处理资源：

import { Asset } from 'expo-asset';
import { Audio } from 'expo-av';

// 单个音频文件示例
const targetAudio = require('../assets/audio/your-song.mp3');

async function getAudioUri() {
  const audioAsset = Asset.fromModule(targetAudio);
  // 确保资源已下载到本地（Dev-Client或生产环境会自动处理，此处做兼容）
  if (!audioAsset.localUri) {
    await audioAsset.downloadAsync();
  }
  return audioAsset.localUri;
}

3. 加载并播放音频 #

调用Audio.loadAsync时传入处理后的本地uri：

async function loadAndPlayAudio() {
  const audioUri = await getAudioUri();
  const { sound } = await Audio.loadAsync({ uri: audioUri });
  
  // 执行播放逻辑
  await sound.playAsync();
}

批量处理多音频文件 #

如果有多个MP3文件，可将所有require存入数组循环处理：

const audioFiles = [
  require('../assets/audio/song1.mp3'),
  require('../assets/audio/song2.mp3'),
  // 更多音频文件...
];

async function getAllAudioUris() {
  return Promise.all(
    audioFiles.map(async (file) => {
      const asset = Asset.fromModule(file);
      if (!asset.localUri) await asset.downloadAsync();
      return {
        name: file.name, // 自定义文件名标识
        uri: asset.localUri
      };
    })
  );
}

关键注意事项 #

• 确保MP3文件路径与assetBundlePatterns中的规则匹配，否则不会被打包。
• Dev-Client构建时，必须使用expo run:android而非Expo Go，才能将资源打包进APK实现离线加载。
• 生产构建无需额外配置，只要assetBundlePatterns正确，资源会自动打包进最终安装包。

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