react-natvie-fetch-blob
网上搜索了许多关于react-natvie-fetch-blob 的使用介绍,发现中文文档很少。实在没办法就直接去看github上门的文档了,做了一些笔记。
英语不怎好,如果写的有何错误之处敬请谅解、指导
https://github.com/aroth/react-native-uploader
我选择react-natvie-fetch-blob的原因
这里表述的是个人观点,不具备专业性和严谨性
- React Native 上传下载的第三发也有挺多的,比如react-native-fileupload。对于简单的上传下载也很好用,但是功能上还是有一些局限性,比如上传进度
- react-natvie-fetch-blob 功能很强大,支持进度,还有很多很细心的功能
- react-natvie-fetch-blob 性能也很好,基本能胜任数据传输的所有功能
特性
- 传输数据直接存取,而不需要base64做跨接
- 文件接口支持一般文件,Asset 文件,相机胶卷文件
- Native-to-native 文件操作接口,减少了JS桥接而导致的性能损耗
- 文件流支持处理大文件
- Blob, File, XMLHttpRequest polyfills that make browser-based library available in RN (experimental)
- 支持JSON 流(Oboe.js)
相关
这个项目的起始出发点是为了解决这个问题 facebook/react-native#854
还是看原文吧:
This project was started in the cause of solving issue facebook/react-native#854, React Native's lacks of Blob implementation which results into problems when transferring binary data.
It is committed to making file access and transfer easier and more efficient for React Native developers. We've implemented highly customizable filesystem and network module which plays well together. For example, developers can upload and download data directly from/to storage, which is more efficient, especially for large files. The file system supports file stream, so you don't have to worry about OOM problem when accessing large files.
In 0.8.0 we introduced experimental Web API polyfills that make it possible to use browser-based libraries in React Native, such as, FireBase JS SDK`
安装
-
安装包,安装完您也可以直接跳到第5步按照wiki教材配置ios和Android环境
npm install --save react-native-fetch-blob
-
或者如果你使用CocoaPods 把下面的加入到您的Podfile
pod 'react-native-fetch-blob', :path => '../node_modules/react-native-fetch-blob'
-
自动链接Native Modules
react-native link
-
使用下面的命令添加到Android AndroidManifest.xml 文件里
RNFB_ANDROID_PERMISSIONS=true react-native link
-
如果你是非默认的项目结果,link脚本也许不生效。请参考the wiki手动链接包(也很简单的)
看到这里小小的总结一下上面五步吧。要不你就1、3、4搞定,要不你就1、5搞定
-
对于Android 5.0或者更低版本的,授权许可外部扩展存储
Android 6.0发布以来,授权许可机制与之前有了些许改变。有兴趣的同学可以参考Official Document,我是没兴趣的!
如果介绍外部存储扩展 (say, SD card storage) for Android 5.0 (or lower) devices,你需要添加下面代码的到AndroidManifest.xml.
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.rnfetchblobtest" android:versionCode="1" android:versionName="1.0"> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> // 添加下面的两句 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> ...
Also, if you're going to use Android Download Manager you have to add this to AndroidManifest.xml
<intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> // 添加这一句 <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/> </intent-filter>
-
对于Android 6.0及以上
貌似不用干嘛呢
原文:
Beginning in Android 6.0 (API level 23), users grant permissions to apps while the app is running, not when they install the app. So adding permissions in AndroidManifest.xml won't work for Android 6.0+ devices. To grant permissions in runtime, you might use PermissionAndroid API.
使用
import RNFetchBlob from 'react-native-fetch-blob'