React-Native使用CameraRoll将图片保存到相册

使用CameraRoll将图片保存到相册在ios和android上的实现有一些差别。

首先CameraRoll有一个CameraRoll.saveToCameraRoll(tag, [type]);方法，可以将一张图片保存到相册中，

参数tag在ios和android上也有些不一样。

ios

对于ios来说，tag可以是任意图片的uri比如网络地址url或者base64,也可以是本地视频文件的URI.

所以对于ios来说，保存图片到相册，只需调用CameraRoll.saveToCameraRoll方法即可。

Android

在Android上，tag参数表示图片的本地uri，也就是说saveToCameraRoll方法只接受本地图片uri作为参数，如file:///data/com.example.apps/test.png。

所以对于网络图片来说，需要先将图片保存下来，再使用saveToCameraRoll方法推到相册中。

• 怎么保存呢？如果图片是base64的形式，则可以使用rn-fetch-blob库的RNFetchBlob,具体如下:

const dest = RNFetchBlob.fs.dirs.DCIMDir + new Date().getTime() + ".png";
RNFetchBlob.fs.writeFile(dest, CommonHelper.realImageBase64String(uri), 'base64').then(res => {
    CameraRoll.saveToCameraRoll(`file://${dest}`).then(_ => {
        // save success
    }).catch(error => {
        // save fail
}).catch(error => {
    // do something
});

static realImageBase64String(s: string): string {
    const pattern = /^data:image\/\S{1,};base64,/;
    const matches = s.match(pattern);
    if (matches && matches.length > 0) {
        const arrays = s.split(matches[0]);
        return arrays[1];
    }

    return '';
}

• 如果图片是远程url，则按如下方法来保存

RNFetchBlob.config({ fileCache: true, appendExt: 'png' }).fetch('GET', uri, {}).then(res => {
    const localUri = res.path().startsWith('file://') ? res.path() : `file://${res.path()}`;
    CameraRoll.saveToCameraRoll(localUri).then(_ => {
        // 保存成功
    }).catch(error => {
        // 保存失败
    });
}).catch(error => {
    // 没有访问外部存储权限
});