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