react-native-fs文件创建、查看、上传、下载

一、安装依赖

1. install

npm install react-native-fs --save

2. link

react-native link react-native-fs

如果link失败，或者link之后仍旧不能import，则考虑手动link，详情查看官网教程，传送门。（温馨提示：新install依赖之后，记得重启一下app——react-native run-ios //Android react-native run-android）

二、使用例子

1. 获得文件夹路径

import RNFS from 'react-native-fs';

//打印出常用路径
printPaths = () => {
  console.log('MainBundlePath=' + RNFS.MainBundlePath)
  console.log('CachesDirectoryPath=' + RNFS.CachesDirectoryPath)
  console.log('DocumentDirectoryPath=' + RNFS.DocumentDirectoryPath)
  console.log('TemporaryDirectoryPath=' + RNFS.TemporaryDirectoryPath)
  console.log('LibraryDirectoryPath=' + RNFS.LibraryDirectoryPath)
  console.log('ExternalDirectoryPath=' + RNFS.ExternalDirectoryPath)
  console.log('ExternalStorageDirectoryPath=' + RNFS.ExternalStorageDirectoryPath)

  //打印日志---ios
  // MainBundlePath=/var/containers/Bundle/Application/9115F4F8-B2F6-4594-B2FC-9FF173946670/DvaStarter.app
  // CachesDirectoryPath=/var/mobile/Containers/Data/Application/558EF9E2-31DA-46FF-925F-160BB4D1EF35/Library/Caches
  // DocumentDirectoryPath=/var/mobile/Containers/Data/Application/558EF9E2-31DA-46FF-925F-160BB4D1EF35/Documents
  // TemporaryDirectoryPath=/private/var/mobile/Containers/Data/Application/558EF9E2-31DA-46FF-925F-160BB4D1EF35/tmp/
  // LibraryDirectoryPath=/var/mobile/Containers/Data/Application/558EF9E2-31DA-46FF-925F-160BB4D1EF35/Library
  // ExternalDirectoryPath=null
  // ExternalStorageDirectoryPath=null
}

这里可以简单了解一下ios的沙盒模型。
1、Documents 目录：您应该将所有的应用程序数据文件写入到这个目录下。这个目录用于存储用户数据。该路径可通过配置实现iTunes共享文件。可被iTunes备份。

2、AppName.app 目录：这是应用程序的程序包目录，包含应用程序的本身。由于应用程序必须经过签名，所以您在运行时不能对这个目录中的内容进行修改，否则可能会使应用程序无法启动。

3、Library 目录：这个目录下有两个子目录：
3.1 Preferences 目录：包含应用程序的偏好设置文件。您不应该直接创建偏好设置文件，而是应该使用NSUserDefaults类来取得和设置应用程序的偏好.
3.2 Caches 目录：用于存放应用程序专用的支持文件，保存应用程序再次启动过程中需要的信息。
可创建子文件夹。可以用来放置您希望被备份但不希望被用户看到的数据。该路径下的文件夹，除Caches以外，都会被iTunes备份。

4、tmp 目录：这个目录用于存放临时文件，保存应用程序再次启动过程中不需要的信息。该路径下的文件不会被iTunes备份。

2. 文件下载RNFS.downloadFile

react-native-fs提供了下载文件的方法。

downloadFile(options: DownloadFileOptions): { jobId: number, promise: Promise<DownloadResult> }

方法解析：
需要一个参数options，格式如下：

type DownloadFileOptions = {
  fromUrl: string;          //下载的地址源（即下载链接）
  toFile: string;           // 本地的存储路径（路径包括文件名）
  headers?: Headers;        // 需要传递给服务器的报头（根据服务器的需要传，一般不用）
  background?: boolean;     // 是否允许在后台下载(仅适用于iOS)
  discretionary?: boolean;  // 是否允许手机操作系统控制下载  (仅适用于iOS)
  progressDivider?: number;//进度回调函数调用的频率（假设设置为5，则每完成5%，就会回调一次progress函数。默认为0，回调频率很高，会影响性能）
  begin?: (res: DownloadBeginCallbackResult) => void;//开始下载时的回调函数
  progress?: (res: DownloadProgressCallbackResult) => void;//下载过程中的回调函数（与属性progressDivider搭配使用）
  resumable?: () => void;    // 是否允许继续继续下载（仅适用于iOS） 
  connectionTimeout?: number // 连接超时时间（仅适用于Android）
  readTimeout?: number       // 读取数据超时时间（适用于Android and iOS）
};

该方法返回一个对象，属性jobId为任务id，为number类型，用于暂停下载和继续下载。属性promise是一个Promise对象，可用来判断下载是否完成，进而执行下载完成后的一些操作。

//设置下载参数
const options = {
  fromUrl: videoUrl,
  toFile: toFile,
  background: true,
  progressDivider: 5,
  begin: (res) => {
    //开始下载时回调
    console.log('begin', res);
  },
  progress: (res) => {
    //下载过程中回调，根据options中设置progressDivider:5，则在完成5%，10%，15%，...，100%时分别回调一次，共回调20次。
    console.log('progress', res)
  }
}
const ret = RNFS.downloadFile(options);//调用downloadFile开始下载
console.log(ret.jobId); //打印一下看看jobId
ret.promise.then(res => {
  //下载完成时执行
  console.log(res)
}
.catch(err => {
  //下载出错时执行
  console.log(err)
}

---

未完待续。。。

---

欢迎加我微信，拉进群交流哦！

微信二维码