You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native中如何获取下载文件并播放?基于react-native-fetch-blob等库

关于 React Native Sound 无需放置到 raw 文件夹也能播放下载文件的说明

嘿,你发现的这个情况其实完全合理!咱们来掰扯清楚为什么会这样:

首先,react-native-sound文档里说的要把文件放到raw文件夹,那是针对APP安装包自带的静态资源的——比如你开发时就确定要包含在APP里的音频,放在android/app/src/main/res/raw下,加载时只需要传文件名就行,框架会自动去这个目录找。

但你现在是用react-native-fs下载文件到RNFS.DocumentDirectoryPath(也就是/data/user/0/com.myproject/files/这个APP私有文档目录),这类文件属于设备文件系统里的动态生成文件,react-native-sound本身就支持直接传入完整的文件路径来加载,根本不需要放到raw文件夹里,这就是你能正常播放的核心原因。

给你补全一下完整的示例代码,方便你参考:

import Sound from 'react-native-sound';
import RNFS from 'react-native-fs';

async function downloadFileAndPlay() {
  console.log('Download');
  // 定义下载目标路径
  const downloadDest = `${RNFS.DocumentDirectoryPath}/myMusic.mp3`;
  // 替换成你的实际音频下载链接
  const audioUrl = 'https://example.com/path/to/your/music.mp3';

  try {
    // 执行下载
    const downloadResult = await RNFS.downloadFile({
      fromUrl: audioUrl,
      toFile: downloadDest,
    }).promise;

    if (downloadResult.statusCode === 200) {
      console.log('文件下载完成,路径:', downloadDest);
      // 初始化Sound实例,传入完整文件路径
      const sound = new Sound(downloadDest, '', (error) => {
        if (error) {
          console.error('加载音频失败:', error);
          return;
        }
        // 开始播放
        sound.play((success) => {
          if (!success) {
            console.log('播放出错了');
          }
          // 播放完毕后释放资源,避免内存泄漏
          sound.release();
        });
      });
    } else {
      console.error('下载失败,状态码:', downloadResult.statusCode);
    }
  } catch (err) {
    console.error('下载过程出错:', err);
  }
}

另外还有几个小要点需要注意:

  • 权限问题:因为你是存在APP的私有目录,Android 10+ 不需要额外申请外部存储权限,但如果是其他目录可能需要配置权限。
  • 资源释放:播放结束后一定要调用sound.release(),不然容易造成内存泄漏。
  • 路径校验:可以在下载完成后打印downloadDest,确认路径和你实际找到的文件路径一致,避免因为路径错误导致加载失败。

内容的提问来源于stack exchange,提问作者deva11

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.22 07:47:48