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

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需要手动设置。

此错误的解决方法:

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")

    }

  },

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

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

时间: 2017-09-09

react-native-fs实现文件下载、文本存储的示例代码

本文内容: react-native-fs的简单使用 下载文件(图片.文件.视频.音频) 将文本写入本地 txt 读取txt文件内容 在已有的txt上添加新的文本 删除文件 上传文件 only iOS github链接: https://github.com/itinance/react-native-fs 另外还有一个下载的库 :https://github.com/wkh237/react-native-fetch-blob 安装步骤 第一步: npm install react-nativ

React Native使用百度Echarts显示图表的示例代码

Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表.相信很多同学在网页端都使用过.今天我就来介绍下在React Native中如何使用Echarts来显示各种图表. 首先需要在我们的React Native项目中安装native-echarts组件,该组件是兼容IOS和安卓双平台的. 安装 npm install native-echarts --save 安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts. 目录结构如下图所示: 基础

React Native实现进度条弹框的示例代码

本文介绍了React Native实现进度条弹框,分享给大家 我们在上传或者下载文件时候,希望有一个进度条弹框去提醒用户取当前正在上传或者下载,也允许用去取点击取消上传或者下载. 首先实现进度条. import React, { PureComponent } from 'react'; import { StyleSheet, View, Animated, Easing, } from 'react-native'; class Bar extends PureComponent { con

React Native 使用Fetch发送网络请求的示例代码

我们在项目中经常会用到HTTP请求来访问网络,HTTP(HTTPS)请求通常分为"GET"."PUT"."POST"."DELETE",如果不指定默认为GET请求. 在项目中我们常用到的一般为GET和POST两种请求方式,针对带参数的表单提交这类的请求,我们通常会使用POST的请求方式. 为了发出HTTP请求,我们需要使用到 React Native 提供的 Fetch API 来进行实现.要从任意地址获取内容的话,只需简单地

React Native使用Modal自定义分享界面的示例代码

在很多App中都会涉及到分享,React Native提供了Modal组件用来实现一些模态弹窗,例如加载进度框,分享弹框等.使用Modal搭建分析的效果如下: 自定义的分析界面代码如下: ShareAlertDialog.js /** * https://github.com/facebook/react-native * @flow 分享弹窗 */ import React, {Component} from 'react'; import {View, TouchableOpacity, A

React Native仿美团下拉菜单的实例代码

本文介绍了React Native仿美团下拉菜单的实例代码,最近也在学习React Native,顺便分享给大家 在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可.如果使用React Native开发上面的效果,需要注意几个问题: 1. 在下拉的时候有动画过度效果: 2.下拉菜单出现后点击菜单项,菜单项可选择,并触发对应的事件: 3.下拉菜单中的项目可以配置: 要实现弹框效果,我们马上回想到使用Mo

使用react实现手机号的数据同步显示功能的示例代码

本文介绍了使用react实现手机号的数据同步显示功能的示例代码,分享给大家,具体如下: 要求如下 输入框输入内容数据长度大于0,展示出预览信息 光标离开关闭预览信息 预览信息每隔4位插入一个特殊字符_,输入内容不变 限制长度为13位 只允许输入数字(0-9) // Zinput.js import React, { Component } from 'react'; import './Zinput.css' // NOTE: 获取焦点事件 原生onFocus 即可 // NOTE: 离开焦点事

Windows下React Native的Android环境部署及布局示例

搭建基础环境 JDK(必须,不解释) SDK(建议使用Android Studio,集成SDK以及模拟器) genymotion(如果是使用真机或者Android Studio自带的模拟器,可以选择不装) NVM(node版本控制器,需要node4.0以上版本) 以上配置不是必须,可自行选择适合自己的环境,部分安装过程可能会涉及到翻墙,需要配置代理 配置踩坑记录 genymotion 这里选择genymotion模拟器来讲解,也会提一下Android Studio自带的模拟器的一些注意点,使用真

React Native之ListView实现九宫格效果的示例

概述 在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码 ListView是基于ScrollView扩展得来的,所以具有ScrollView的相关属性: dataSource:数据源,类似于安卓中我们传入BaseAdapter的数据集合. renderRow:渲染某一行,类似于BaseAdapter中的getItem方法. onEndReached:简单说就是用于分页操作,在安卓中原生开发中,我们需要

React Native中TabBarIOS的简单使用方法示例

前言 大家应该都知道,TabBarIOS是RN中自带的组件,可直接使用,不用引用第三方组件,下面讲解TabBarIOS的使用方法,话不多说了,来一起看看详细的介绍吧. 首先看一下效果图,如下图所示: 效果图 看完效果图再对代码进行说明. import React, { Component } from 'react'; import { StyleSheet, View, TabBarIOS, NavigatorIOS, Navigator, AppRegistry, Image, Toucha