详解react-native-fs插件的使用以及遇到的坑


Posted in Javascript onSeptember 12, 2017

react-native-fs插件是文件对上传和下载时使用的,iOS和android都可使用,File upload (iOS only)。

安装命令:

npm install react-native-fs --save
//注意:如果react native版本是<0.40安装,使用此标签:
npm install react-native-fs@2.0.1-rc.2 --save

安装后执行: 

react-native link react-native-fs

在android/app/src/main/AndroidManifest.xml,里添加android读写文件的权限

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> 

进行完上述安装操作后,可以使用这个插件的各种方法,每个方法的具体使用例子,请看链接:https://github.com/itinance/react-native-fs。在项目里我需要下载图片文件,并获得下载到本地后的图片路径,然后显示图片。所以使用到downloadFile方法。封装了一个可调用的服务,代码如下:

downloadFile(imageId, cookie, callback) {

    const downloadDest = `${RNFS.DocumentDirectoryPath}/${((Math.random() * 1000) | 0)}.jpg`;

    var formUrl = CommonSvc.baseURL + '/api/image/0/' + imageId;

    //var formUrl = 'http://lorempixel.com/400/200/';

    const options = {

      fromUrl: formUrl,

      toFile: downloadDest,

      background: true,

      headers: {

        'Cookie': cookie //需要添加验证到接口要设置cookie

      },

      begin: (res) => {

        //console.log(res);

      },

      progress: (res) => {

        //console.log(res);

      }

    };

    try {

      const ret = RNFS.downloadFile(options);

      ret.promise.then(res => {

        //callback(null, Platform.OS === 'android' ? downloadDest : 'file://' + downloadDest)

        callback(null, 'file://' + downloadDest)

 

      }).catch(err => {

        callback(err)

      });

    }

    catch (e) {

      callback("error")

    }

 

  },

在实现这个功能到时候,android下载到本地的图片显示不出来,这个查阅了相关资料后,原因是android调用此插件,需要添加接口验证信息(如果接口是需要验证的情况下),这个问题怎么解决呢

调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错,而在iOS上运行没问题。原因是因为接口是有验证信息的,而调用这个插件时没有传入,在iOS上会自动加上验证信息,而 android需要手动设置。

详解react-native-fs插件的使用以及遇到的坑

此错误的解决方法:

1.在调用登录接口时,保存下cookie(cookie在response里),在调用react-native-fs时放在headers里传入,代码如下: 

_appLogin(userName, password, callback){

 

    fetch(commonSvc.baseURL + '/account/app-login', {

      method: 'POST',

      headers: {

        'Accept': 'application/json',

        'Content-Type': 'application/json'

      },

      body: JSON.stringify({

        UserName: userName,

        Password: password

      })

    }).then(

      (response) => {

        if (response.ok) {

          return response;

        } else {

          var message;

          switch (response.status) {

            case 710:

              message = LanguageChooseSvc.strings['api_common_' + 710];

              break;

            case 711:

              message = LanguageChooseSvc.strings['api_common_' + 711];

              break;

            case 400:

              message = LanguageChooseSvc.strings['api_common_' + 400];

              break;

            default:

              message = commonSvc.httpErrorMessage;

              break;

          }

          throw {message: message};

        }

      }

    ).then(

      (responseJson) => {

        callback(null, responseJson);

      }

    ).catch(

      (error) => {

        callback(error.message);

      }

    );

  },

2.在调用react-native-fs时放在headers里传入,代码如下:

downloadFile(imageId, cookie, callback) {

    const downloadDest = `${RNFS.DocumentDirectoryPath}/${((Math.random() * 1000) | 0)}.jpg`;

    var formUrl = CommonSvc.baseURL + '/api/image/0/' + imageId;

    //var formUrl = 'http://lorempixel.com/400/200/';

    const options = {

      fromUrl: formUrl,

      toFile: downloadDest,

      background: true,

      headers: {

        'Cookie': cookie //需要添加验证到接口要设置cookie

      },

      begin: (res) => {

        //console.log(res);

      },

      progress: (res) => {

        //console.log(res);

      }

    };

    try {

      const ret = RNFS.downloadFile(options);

      ret.promise.then(res => {

        //callback(null, Platform.OS === 'android' ? downloadDest : 'file://' + downloadDest)

        callback(null, 'file://' + downloadDest)

 

      }).catch(err => {

        callback(err)

      });

    }

    catch (e) {

      callback("error")

    }

 

  },

接下来项目写到上传文件的功能时,继续补充上传功能...

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
学习vue.js计算属性
Dec 03 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
node跨域请求方法小结
Aug 25 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
React中jquery引用的实现方法
Sep 12 #jQuery
JS+canvas动态绘制饼图的方法示例
Sep 12 #Javascript
详解react-router4 异步加载路由两种方法
Sep 12 #Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 #Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 #Javascript
Angular 4.0学习教程之架构详解
Sep 12 #Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 #jQuery
You might like
php获取当前时间的毫秒数的方法
2014/01/26 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
浅谈Python处理PDF的方法
2017/11/10 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
numpy.where() 用法详解
2019/05/27 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python openssl模块安装及用法
2020/12/06 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
大型演出策划方案
2014/05/28 职场文书
高考励志标语
2014/06/05 职场文书
2015年中个人总结范文
2015/03/10 职场文书