详解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 相关文章推荐
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
vue 组件基础知识总结
Jan 26 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(3)
2006/10/09 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
node.js超时timeout详解
2014/11/26 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python爬取三国演义的实现方法
2016/09/12 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
资产经营总监岗位职责
2013/12/04 职场文书
个人求职信范文分享
2013/12/13 职场文书
工地安全生产标语
2014/06/06 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
公司周年庆典标语
2014/10/07 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
全民创业工作总结
2015/08/13 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server