文档章节

react-natvie-fetch-blob使用

古乙丁三雨
 古乙丁三雨
发布于 2017/06/24 13:25
字数 811
阅读 2628
收藏 0

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`

安装

  1. 安装包,安装完您也可以直接跳到第5步按照wiki教材配置ios和Android环境

     npm install --save react-native-fetch-blob
    
  2. 或者如果你使用CocoaPods 把下面的加入到您的Podfile

     pod 'react-native-fetch-blob',
         :path => '../node_modules/react-native-fetch-blob'
    
  3. 自动链接Native Modules

     react-native link
    
  4. 使用下面的命令添加到Android AndroidManifest.xml 文件里

     RNFB_ANDROID_PERMISSIONS=true react-native link
    
  5. 如果你是非默认的项目结果,link脚本也许不生效。请参考the wiki手动链接包(也很简单的)

    看到这里小小的总结一下上面五步吧。要不你就1、3、4搞定,要不你就1、5搞定

  6. 对于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>	
    
  7. 对于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'	

© 著作权归作者所有

古乙丁三雨
粉丝 1
博文 59
码字总数 30410
作品 0
景德镇
程序员
私信 提问
React Native图片缓存组件

今天介绍一个React Native的图片缓存组件 react-native-rn-cacheimage ,纯JS实现,所以兼容性很好。 大家都知道,其实React Native 的 组件在 端实现了缓存,而 端仍未实现,而且,就算实现...

Quenice
2018/10/19
0
0
Fetch初探

前言 fetch这个东西,之前也看到过有人介绍,但毕竟还是实验性阶段的东西,最近在看react-native的文档,讲到网络的地方,文档上是推荐地使用fetch,想必框架本身也对其有所封装。这里就先自...

TokenYang
2017/11/22
0
0
移动开发者如何更好地学习 React Native? | 技术头条

作者 | 魔笛 责编 | 郭芮 2015年3月,Facebook正式发布react-native,只支持iOS平台;2015年9月,Facebook发布了React Native for Android,让这一技术正式成为跨平台开发框架。 我们团队是在...

CSDN资讯
2018/09/26
0
0
React构建单页应用方法与实例

React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM、JSX等。那么接下来我们就来学习...

王春-海子
2016/08/09
26
0
手把手教你在Windows下搭建React Native Android开发环境

最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考。(我都是参考官方文档的) react-native...

Common1140
2015/12/24
10.5K
45

没有更多内容

加载失败,请刷新页面

加载更多

面试爱奇艺,竟然挂在第5轮……

今天给大家分享我曾经在爱奇艺的面试,过程还是比较有意思的,可以给大家一些参考 <br> 聊骚阶段 嗲妹妹:你好,我是爱奇艺的HR,我们正在招聘运维开发岗位,请问您最近有在看工作机会吗? ...

上海小胖
37分钟前
1
0
Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
解决多线程并行加载缓存问题(利用guava实现)

依赖 com.google.guava:guava:20.0 import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import j......

暗中观察
昨天
4
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部