在 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 这个方法来拼接真实路径就可以了。