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

转载  更新时间:2017年09月22日 16:26:49   作者:精神病患者link常   我要评论

本篇文章主要介绍了react-native-fs实现文件下载、文本存储的示例代码,具有一定的参考价值,有兴趣的可以了解下

本文内容:

react-native-fs的简单使用

  1. 下载文件(图片、文件、视频、音频)
  2. 将文本写入本地 txt
  3. 读取txt文件内容
  4. 在已有的txt上添加新的文本
  5. 删除文件
  6. 上传文件 only iOS

github链接: https://github.com/itinance/react-native-fs

另外还有一个下载的库 :https://github.com/wkh237/react-native-fetch-blob

安装步骤

第一步:

npm install react-native-fs --save

第二步:

react-native link react-native-fs

OK 即可开始使用(不放心的可以按照github上的对比一下)

简单使用

import RNFS from 'react-native-fs';

下载文件

/*下载文件*/
  downloadFile() {
    // On Android, use "RNFS.DocumentDirectoryPath" (MainBundlePath is not defined)

    // 图片
    // const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.jpg`;
    // const formUrl = 'http://img.kaiyanapp.com/c7b46c492261a7c19fa880802afe93b3.png?imageMogr2/quality/60/format/jpg';

    // 文件
    // const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.zip`;
    // const formUrl = 'http://files.cnblogs.com/zhuqil/UIWebViewDemo.zip';

    // 视频
    // const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.mp4`;
    // http://gslb.miaopai.com/stream/SnY~bbkqbi2uLEBMXHxGqnNKqyiG9ub8.mp4?vend=miaopai&
    // https://gslb.miaopai.com/stream/BNaEYOL-tEwSrAiYBnPDR03dDlFavoWD.mp4?vend=miaopai&
    // const formUrl = 'https://gslb.miaopai.com/stream/9Q5ADAp2v5NHtQIeQT7t461VkNPxvC2T.mp4?vend=miaopai&';

    // 音频
    const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.mp3`;
    // http://wvoice.spriteapp.cn/voice/2015/0902/55e6fc6e4f7b9.mp3
    const formUrl = 'http://wvoice.spriteapp.cn/voice/2015/0818/55d2248309b09.mp3';

    const options = {
      fromUrl: formUrl,
      toFile: downloadDest,
      background: true,
      begin: (res) => {
        console.log('begin', res);
        console.log('contentLength:', res.contentLength / 1024 / 1024, 'M');
      },
      progress: (res) => {

        let pro = res.bytesWritten / res.contentLength;

        this.setState({
          progressNum: pro,
        });
      }
    };
    try {
      const ret = RNFS.downloadFile(options);
      ret.promise.then(res => {
        console.log('success', res);

        console.log('file://' + downloadDest)

      }).catch(err => {
        console.log('err', err);
      });
    }
    catch (e) {
      console.log(error);
    }

  }

将文本写入本地 txt

 /*将文本写入本地 txt*/
  writeFile() {
    // create a path you want to write to
    const path = RNFS.MainBundlePath + '/test.txt';

    // write the file
    RNFS.writeFile(path, '这是一段文本,YES', 'utf8')
      .then((success) => {
        console.log('path', path);
      })
      .catch((err) => {
        console.log(err.message);
      });
  }

读取txt文件内容

/*读取txt文件内容*/
  readFile() {
    // create a path you want to delete
    const path = RNFS.MainBundlePath + '/test.txt';

    return RNFS.readFile(path)
      .then((result) => {
        console.log(result);

        this.setState({
          readTxtResult: result,
        })
      })
      .catch((err) => {
        console.log(err.message);

      });
  }

在已有的txt上添加新的文本

/*在已有的txt上添加新的文本*/
  appendFile() {
    const path = RNFS.MainBundlePath + '/test.txt';

    return RNFS.appendFile(path, '新添加的文本', 'utf8')
      .then((success) => {
        console.log('success');
      })
      .catch((err) => {
        console.log(err.message);

      });
  }

删除文件

  /*删除文件*/
  deleteFile() {
    // create a path you want to delete
    const path = RNFS.MainBundlePath + '/test.txt';

    return RNFS.unlink(path)
      .then(() => {
        console.log('FILE DELETED');
      })
      // `unlink` will throw an error, if the item to unlink does not exist
      .catch((err) => {
        console.log(err.message);
      });
  }

上传文件 only iOS

 /*上传文件 only iOS*/
  uploadFile() {
    const uploadSrc = `${RNFS.MainBundlePath}/test.txt`;

    const uploadUrl = 'http://buz.co/rnfs/upload-tester.php';

    const options = {
      toUrl: uploadUrl,
      files: [{name: 'myfile', filename: 'test.txt', filepath: uploadSrc, filetype: 'text/plain'}],
      background: true,
      method: 'POST', // PUT
      begin: (res) => {
        console.log('begin', res);
      },
      progress: (res) => {
        console.log('progress', res);
      }
    };

    const ret = RNFS.uploadFiles(options);

    return ret.promise.then(res => {
      const response = JSON.parse(res.body);
      console.log(response);

    })
      .catch(err => {
        console.log('err', err);
      });
  }

demo:https://github.com/chjwrr/RN-react-native-fs

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

相关文章

  • 使用原生js封装的ajax实例(兼容jsonp)

    使用原生js封装的ajax实例(兼容jsonp)

    下面小编就为大家带来一篇使用原生js封装的ajax实例(兼容jsonp)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • artDialog+plupload实现多文件上传

    artDialog+plupload实现多文件上传

    这篇文章主要介绍了artDialog+plupload实现多文件上传的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • jsp 自动编译机制详细介绍

    jsp 自动编译机制详细介绍

    这篇文章主要介绍了 Jasper的自动检测实现的机制比较简单,依靠某后台线程不断检测JSP文件与编译后的class文件的最后修改时间是否相同,若相同则认为没有改动,但倘若不同则需要重新编译,需要的朋友可以参考下
    2016-12-12
  • js使用cookie记录用户名的方法

    js使用cookie记录用户名的方法

    这篇文章主要介绍了js使用cookie记录用户名的方法,通过完整实例形式分析了JavaScript针对cookie的创建、赋值及删除等操作技巧,以及通过cookie记录用户登录信息的方法,需要的朋友可以参考下
    2015-11-11
  • JavaScript实现统计文本框Textarea字数增强用户体验

    JavaScript实现统计文本框Textarea字数增强用户体验

    现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验,本文也尝试着实现一下
    2012-12-12
  • javascript事件冒泡和事件捕获详解

    javascript事件冒泡和事件捕获详解

    最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处。找到了一些好文章解惑,在这里分享给大家。
    2015-05-05
  • 详解基于javascript实现的苹果系统底部菜单

    详解基于javascript实现的苹果系统底部菜单

    本篇文章主要对基于javascript实现的苹果系统底部菜单进行了详细的分析说明,有助于理解和学习编写苹果系统底部菜单,相信会对大家有所帮助,下面就跟小编一起来看看吧
    2016-12-12
  • 3款实用的在线JS代码工具(国外)

    3款实用的在线JS代码工具(国外)

    本文为大家推荐3款非常实用的在线JS代码工具,可以帮助你方便地处理JavaScript或jQuery代码
    2012-03-03
  • 检查输入的是否是数字使用keyCode配合onkeypress事件

    检查输入的是否是数字使用keyCode配合onkeypress事件

    检查输入的是否是数字在本文使用keyCode配合onkeypress事件来实现,具体示例如下
    2014-01-01
  • JS控制显示隐藏兼容问题(IE6、IE7、IE8)

    JS控制显示隐藏兼容问题(IE6、IE7、IE8)

    IE6、IE7、IE8 JS控制显示隐藏兼容问题
    2010-04-04

最新评论