react-native-fs文件创建、查看、上传、下载
一、安装依赖
npm install react-native-fs --save
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)
未完待续。。。