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

跨平台图片保存至相册

最新推荐文章于 2024-11-05 09:57:58 发布

原创最新推荐文章于 2024-11-05 09:57:58 发布 · 3.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#android #ios #react native

RN 同时被 3 个专栏收录

3 篇文章

订阅专栏

Android

3 篇文章

订阅专栏

ios

1 篇文章

订阅专栏

本文详细介绍了如何使用CameraRoll在iOS和Android平台上将图片保存到设备相册的方法。在iOS上，直接通过uri或base64字符串调用CameraRoll.saveToCameraRoll即可；而在Android上，需先将图片保存到本地，再使用该方法。文章还提供了使用rn-fetch-blob库处理base64和远程url图片的具体代码。

使用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 => {
    // 没有访问外部存储权限
});