`rn-fetch-blob` 使用教程

2026-01-16 10:15:24作者：裴锟轩Denise

rn-fetch-blob是一款专为React Native开发者设计的高效文件访问与数据传输库，解决了原生React Native在二进制数据处理上的局限性。它支持直接从存储读写数据，绕过BASE64编码的效率瓶颈，尤其适合大文件操作，避免了JavaScript桥接导致的性能损耗。此外，该库提供了文件流处理能力，确保处理大型文件时内存友好，并引入实验性的Web API垫片，使浏览器端的库如FireBase JS SDK能在RN中使用。通过优化的文件系统和网络模块，rn-fetch-blob让开发者能够更便捷地实现上传、下载任务，以及管理缓存文件，极大提升跨平台应用的数据交互体验。无需复杂配置，轻松集成于你的React Native项目之中，是构建高性能移动应用的得力助手。

项目地址：https://gitcode.com/gh_mirrors/rn/rn-fetch-blob

1. 项目目录结构及介绍

rn-fetch-blob 的目录结构可能包括以下关键部分：

rn-fetch-blob/
├── android/            # Android平台相关代码
│   ├── src/             # 安卓原生代码
│   └── build.gradle     # Android构建文件
├── ios/                # iOS平台相关代码
│   ├── RNFetchBlob.xcodeproj  # Xcode工程文件
│   └── Podfile         # CocoaPods依赖管理文件
├── lib/                # JavaScript库代码
│   ├── index.js         # 主入口文件
│   └── ...              # 其他辅助函数和接口
├── package.json        # npm包描述文件
└── README.md           # 项目读我文件，包含使用指南

android: 包含Android平台的源码和构建配置。
ios: 包含iOS平台的源码和Xcode项目设置。
lib: 存放JavaScript接口实现，供React Native应用调用。
package.json: 项目依赖及版本信息。

2. 项目启动文件介绍

在React Native应用中集成rn-fetch-blob时，通常在你的组件或服务中引入库，然后使用其提供的API。例如：

import RNFetchBlob from 'rn-fetch-blob';

// 使用示例
RNFetchBlob.fs
  .readFile(filePath, 'base64')
  .then((data) => {
    // 处理数据...
  })
  .catch((error) => {
    // 错误处理...
  });

启动一个HTTP请求可能类似这样：

RNFetchBlob.fetch('POST', 'your-api-url', {
  'Content-Type': 'multipart/form-data',
}, [
  { name: 'key1', filename: 'file1.txt', type: 'text/plain', data: RNFetchBlob.wrap('path/to/file1.txt') },
])
.then((res) => {
  // 请求成功后的处理...
})
.catch((error) => {
  // 请求失败的处理...
});

请注意，实际的启动文件取决于你的React Native项目结构，这里的例子仅展示了如何导入和使用rn-fetch-blob库。

3. 项目的配置文件介绍

Android 配置

在android/app/build.gradle中添加依赖：

dependencies {
    ...
    implementation project(':react-native-fetch-blob')
}

在settings.gradle里包含子项目：

include ':react-native-fetch-blob'
project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')

iOS 配置

首先，确保安装CocoaPods，然后在ios/Podfile中添加依赖：

target 'YourAppTarget' do
  ...
  pod 'RNFetchBlob', :path => '../node_modules/rn-fetch-blob'
end

运行pod install更新Pods。

最后，在你的React Native项目主文件（如AppDelegate.m）中导入并初始化：

#import "RNFetchBlob/RNFetchBlob.h"

...

[RCTBridge registerModule:(id<RCTBridgeModule>)[[RNFetchBlob alloc] init]];

完成这些步骤后，你就可以在React Native应用中使用rn-fetch-blob的功能了，比如文件操作、网络请求以及进度监听等。记得要遵循官方文档来解决可能出现的问题和配置自定义选项。

rn-fetch-blob