详解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 相关文章推荐
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
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函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
python去除扩展名的实例讲解
2018/04/23 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python使用epoll实现服务端的方法
2018/10/16 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
技术总监个人的自我评价范文
2013/12/18 职场文书
学前教育专业求职信
2014/09/02 职场文书
工程部文员岗位职责
2015/02/04 职场文书
付款证明格式范文
2015/06/19 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL
GO中sync包自由控制并发示例详解
2022/08/05 Golang