Reacvt-Native|Reacvt-Native 图片下载使用介绍 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 functiongetUUID(){ 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`; }

判断图片是否为正常的链接 【Reacvt-Native|Reacvt-Native 图片下载使用介绍】使用 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 这个方法来拼接真实路径就可以了。