Reacvt-Native 图片下载使用介绍

在 Reacvt-Native 的图片下载上，有蛮多三方组件已经集成封装，我们这里来简单介绍一下 RNFS 的使用

下载

首先贴上代码：

	// 图片
    let downloadDest;
    if (Platform.OS === 'ios') {
    	 // iOS路径
        downloadDest = `${RNFS.DocumentDirectoryPath}/${((Math.random() * 1000000) | 0)}.jpg`;
    } else {
        // 安卓存在挂载的外置存储上
        downloadDest = `${RNFS.ExternalDirectoryPath}/${((Math.random() * 1000000) | 0)}.jpg`;
    }
    let formUrl = imageUrl;
    // 判断有没有这些前缀，没有的话下载会失败
    if (formUrl.indexOf("https://") != -1 || formUrl.indexOf("http://") != -1) {
    } else {
        formUrl = 'http://' + formUrl;
    }
    console.log('下载的formUrl===', formUrl)
    const options = {
        fromUrl: formUrl,
        toFile: downloadDest,
        
    };
    try {
        const ret = RNFS.downloadFile(options);
        ret.promise.then(res => {
        		// 下载成功的回调，例如保存图片
            successCallBack('file://' + downloadDest)
            
        }).catch(err => {
            console.log('下载图片错误，错误提示:', err);
        });
    }
    catch (error) {
        console.log('下载失败', error);
    }
复制代码

分析

首先使用 RNFS 下载图片，流程是 设置图片存储路径以及名称 -> 判断图片是否为正常的链接（是否包含http/https开头，没有的话下载会失败！）-> 配置必要的下载参数 -> 在回调中实现对应逻辑

然后我们就开始从第一步开始说起，

设置图片存储路径以及名称

因为 iOS 跟安卓端路径存在差异，因此需要分别对其设置相应路径；

iOS 路径使用 RNFS.DocumentDirectoryPath即获取当前沙盒路径，安卓端使用 RNFS.ExternalDirectoryPath。

对于图片的命名，在这边为了防止出现重名的情况，我们生成 UDID 来做图片唯一识别，生成方式也很简单：

export function  getUUID(){
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        }).toUpperCase();
}
复制代码

合起来图片路径就可以根据系统分别为:

if (Platform.OS === 'ios') {
    	 // iOS路径
        downloadDest = `${RNFS.DocumentDirectoryPath}/${( getUUID())}.jpg`;
    } else {
        // 安卓存在挂载的外置存储上
        downloadDest = `${RNFS.ExternalDirectoryPath}/${( getUUID())}.jpg`;
    }
复制代码

判断图片是否为正常的链接

使用 RNFS 下载图片默认不支持没有包含http/https开头的，因此我们需要对其链接做一个判断：

let formUrl = imageUrl;
    // 判断有没有这些前缀，没有的话下载会失败
    if (formUrl.indexOf("https://") != -1 || formUrl.indexOf("http://") != -1) {
    } else {
        formUrl = 'http://' + formUrl;
    }
复制代码

这样就不会有问题了～

配置必要的下载参数

目前有以下这些参数,不过对我们来说只需要配置几个必要的即可

type DownloadFileOptions = {
  fromUrl: string;          // 下载地址(必要)
  toFile: string;           // 下载到本地的路径(必要)
  headers?: Headers;        // 通过服务器的头部信息
  background?: boolean;     // 是否允许在后台下载(只支持 iOS)
  discretionary?: boolean;  // 是否允许设置下载的时间和速度  (只支持 iOS)
  cacheable?: boolean;      // 是否允许 NSURLCache 获取缓存内容，默认允许(只支持 iOS)
  progressDivider?: number; // 设置下载进度回调的次数，比如设置 progressDivider = 5，那在进度回调中回回调5次，分别为：0，20，40，60，80，100，下载完成100的回调默认存在
  begin?: (res: DownloadBeginCallbackResult) => void;//开始下载
  progress?: (res: DownloadProgressCallbackResult) => void;///下载进度
  resumable?: () => void;    // 断点续传(只支持 iOS)
  connectionTimeout?: number // 设置链接超时时间（只支持安卓）
  readTimeout?: number       // 设置读取数据超时时间，两个端都是通用的
};
复制代码

如果只是简简单单想要下图片的话，咱们只需要用前两个就ok了～

const options = {
        fromUrl: formUrl,
        toFile: downloadDest,
        
    };
    //开始下载
    const ret = RNFS.downloadFile(options);
复制代码

在回调中实现对应逻辑

接着下载成功后，图片保存的路径就是我们之前设置的文件路径，然后还需要在前面添加上 file:// 才能查看图片

	try {
        
        ret.promise.then(res => {
        		// 下载成功的回调，例如保存图片
            successCallBack('file://' + downloadDest)
            
        }).catch(err => {
            console.log('下载图片错误，错误提示:', err);
        });
    }
    catch (error) {
        console.log('下载失败', error);
    }
复制代码

拷贝

拷贝功能使用起来就比较简单，不过需要注意的是使用 RNFS 拷贝图片之后，其实严格意义上说这个是剪切，并且需要重新对图片命名；

首先，设置拷贝文件的路径，也是按照上面的方法：

let imageUrl =Platform.OS === 'ios'?('file://'+ `${RNFS.DocumentDirectoryPath}/${(getUUID())}.jpg`)
    :('file://'+ `${RNFS.ExternalDirectoryPath}/${(getUUID())}.jpg`);
复制代码

接着调用拷贝的方法

RNFS.copyFile(url,imageUrl)
                    .then(()=>{
                        console.log('copy成功～',imageUrl)
                        
                    })
                    .catch((error)=>{
                        LWToast.hide()
                        console.log('error：',error)
                    });

复制代码

url 为原图片路径，这里还有一个地方值得注意的是，原图片如果是把路径做了持久化存储，在第二次打开 app 的时候，你会发现再次打开图片时是无法获取到图片的，对于 iOS 来说，因为 app 是在沙盒中运行，而每次运行的沙盒地址不一样，因此我们只需要对图片名称做持久化存储即可，然后通过 RNFS.DocumentDirectoryPath 这个方法来拼接真实路径就可以了。