详解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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
用 JSON 处理缓存
Apr 27 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
php跨域调用json的例子
Nov 13 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
vue弹出框组件封装实例代码
Oct 31 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Python加载带有注释的Json文件实例
2018/05/23 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
pytest中文文档之编写断言
2019/09/12 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Keras自定义IOU方式
2020/06/10 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
thinkphp5 路由分发原理
2021/03/18 PHP
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
供用电专业求职信
2014/07/07 职场文书
病假证明模板
2015/06/19 职场文书
吧主申请感言怎么写
2015/08/03 职场文书