RNFetchBlob完整使用指南：React Native文件操作与网络请求终极解决方案
【免费下载链接】rn-fetch-blob项目地址: https://gitcode.com/gh_mirrors/rn/rn-fetch-blob
RNFetchBlob是一个致力于让React Native开发者更轻松高效地进行文件访问和数据传输的项目。它解决了React Native缺乏Blob实现的问题，提供了高度可定制的文件系统和网络模块，特别适合处理大文件传输和二进制数据操作。
🚀 核心功能亮点
RNFetchBlob提供了以下强大功能：
- 直接存储传输：无需BASE64桥接，直接在存储设备间传输数据
- 文件API支持：支持常规文件、资源文件和相册文件
- 原生文件操作：减少JS桥接性能损耗
- 文件流支持：处理大文件时的流式操作
- Web API兼容：提供Blob、File、XMLHttpRequest的polyfill
📱 安装配置指南
基础安装
使用npm安装：
npm install --save rn-fetch-blob或使用CocoaPods（iOS）：
pod 'rn-fetch-blob', :path => '../node_modules/rn-fetch-blob'自动链接（React Native 0.29.2 - 0.68.0）
react-native link rn-fetch-blobAndroid权限配置
在AndroidManifest.xml中添加必要的权限：
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />🔄 请求体处理流程详解
RNFetchBlob会根据请求体类型和Content-Type头自动决定如何发送数据。以下是完整的处理流程：
处理规则总结：
- 发送表单数据时，Content-Type头不重要，当body是数组时会自动设置合适的内容类型
- 发送二进制数据时有两种选择：使用BASE64编码字符串或指向包含body的文件路径
- 如果Content-Type包含子串
;BASE64或application/octet，给定的body将被视为BASE64编码数据 - 如果字符串以
RNFetchBlob-file://开头，它将尝试从URI字符串中查找数据
📥 文件下载实战
基础下载示例
import RNFetchBlob from 'rn-fetch-blob'; RNFetchBlob.fetch('GET', 'http://www.example.com/images/img1.png', { Authorization: 'Bearer access-token...', }) .then((res) => { let status = res.info().status; if (status == 200) { let base64Str = res.base64(); let text = res.text(); let json = res.json(); } }) .catch((errorMessage, statusCode) => { // 错误处理 });直接下载到存储
对于大文件响应，建议使用文件缓存：
RNFetchBlob.config({ fileCache: true, }) .fetch('GET', 'http://www.example.com/file/example.zip', { // 一些头信息 }) .then((res) => { console.log('文件保存到', res.path()); });设置文件扩展名
RNFetchBlob.config({ fileCache: true, appendExt: 'png', }) .fetch('GET', 'http://www.example.com/file/example.zip') .then((res) => { console.log('带扩展名的文件路径', res.path()); });📤 文件上传技巧
基础文件上传
RNFetchBlob.fetch( 'POST', 'https://content.dropboxapi.com/2/files/upload', { Authorization: 'Bearer access-token...', 'Content-Type': 'application/octet-stream', }, base64ImageString ) .then((res) => { console.log(res.text()); }) .catch((err) => { // 错误处理 });从存储上传文件
RNFetchBlob.fetch( 'POST', 'https://content.dropboxapi.com/2/files/upload', { Authorization: 'Bearer access-token...', 'Content-Type': 'application/octet-stream', }, RNFetchBlob.wrap(PATH_TO_THE_FILE) ) .then((res) => { console.log(res.text()); }) .catch((err) => { // 错误处理 });📊 多部分表单数据上传
RNFetchBlob.fetch( 'POST', 'http://www.example.com/upload-form', { Authorization: 'Bearer access-token', 'Content-Type': 'multipart/form-data', }, [ { name: 'avatar', filename: 'avatar.png', data: binaryDataInBase64 }, { name: 'avatar-png', filename: 'avatar-png.png', type: 'image/png', data: binaryDataInBase64, }, { name: 'name', data: 'user' }, { name: 'info', data: JSON.stringify({ mail: 'example@example.com', tel: '12345678', }), }, ] ) .then((resp) => { // 成功处理 }) .catch((err) => { // 错误处理 });⚡ 性能优化对比
大文件加载性能对比
编码方式性能对比
文件写入性能对比
🔧 文件系统操作API
常用文件操作
// 读取文件 RNFetchBlob.fs.readFile(filePath, 'base64') .then((data) => { // 处理数据 }) .catch((error) => { // 错误处理 }); // 写入文件 RNFetchBlob.fs.writeFile(filePath, content, encoding) .then(() => { // 写入成功 }); // 检查文件是否存在 RNFetchBlob.fs.exists(filePath) .then((exists) => { console.log('文件存在:', exists); });文件流操作
// 读取流 let data = ''; RNFetchBlob.fs.readStream(filePath, 'base64', 4095) .then((ifstream) => { ifstream.open(); ifstream.onData((chunk) => { data += chunk; }); ifstream.onEnd(() => { // 流读取完成 }); });📈 进度监听与取消请求
上传下载进度监听
RNFetchBlob.fetch( 'POST', 'http://www.example.com/upload', { 'Content-Type': 'octet-stream', }, base64DataString ) .uploadProgress({ interval: 250 }, (written, total) => { console.log('已上传', written / total); }) .progress({ count: 10 }, (received, total) => { console.log('进度', received / total); }) .then((resp) => { // 请求完成 }) .catch((err) => { // 错误处理 });取消请求
let task = RNFetchBlob.fetch('GET', 'http://example.com/file/1'); task.then(() => { ... }) .catch((err) => { console.log(err); }); // 取消请求 task.cancel((err) => { ... });🔒 Android特殊功能
媒体扫描器
RNFetchBlob.config({ path: dirs.DCIMDir + '/music.mp3', }) .fetch('GET', 'http://example.com/music.mp3') .then((res) => RNFetchBlob.fs.scanFile([{ path: res.path(), mime: 'audio/mpeg' }]) .then(() => { // 扫描文件成功 }) .catch((err) => { // 扫描文件错误 });下载管理器
RNFetchBlob.config({ addAndroidDownloads: { useDownloadManager: true, notification: false, mime: 'text/plain', description: 'File downloaded by download manager.', }, }) .fetch('GET', 'http://example.com/file/somefile') .then((resp) => { console.log('下载文件路径', resp.path()); });💡 实用性能技巧
调整缓冲区大小：对于大文件，增加缓冲区大小（如102400）和间隔时间（默认为10ms）
避免BASE64开销：尽可能使用文件存储而不是BASE64编码字符串
谨慎使用ASCII编码：由于性能问题，仅在需要时使用
❗ 注意事项与常见问题
- 库不会自动对URL中的unicode字符进行urlencode
- 从现有文件创建Blob时，如果关闭blob，文件将被移除
- 文件流和进度事件可能会减慢应用速度，建议升级到0.9.6+版本
通过本指南，你应该能够熟练使用RNFetchBlob来处理React Native中的文件操作和网络请求。记住合理使用文件缓存和流操作来优化应用性能。
【免费下载链接】rn-fetch-blob项目地址: https://gitcode.com/gh_mirrors/rn/rn-fetch-blob
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
