精彩文章免费看

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

一、安装依赖
  • install
  • 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)
    

    未完待续。。。

    最后编辑于:2020-09-16 12:39