Reacvt-Native 图片下载使用介绍

1,138 阅读4分钟

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