react native android 实现图片预览 图片保存 react-native-image-zoom-viewer

上一篇 介绍了ios 的图片预览 和图片保存 ,Android 实现起来就稍微复杂点,

image.png

android 的 CameraRoll 只支持 本地文件,解决方式就是把图片下载到本地 ,然后调用这个保存到相册的方法。
这里用到的是 react-native-fs
关于这个 react-native-fs 的使用 git上介绍的已经很详细了,大家可以去看下如何使用的。
下面介绍下:android保存图片到本地相册
1.在android 工程下的
image.png

添加 读取外部存储的权限:

 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  1. 下载图片并保存
这里展现部分代码:
import RNFS from 'react-native-fs';
import ImageViewer from 'react-native-image-zoom-viewer';


  this.androidDownPath = `${RNFS.DocumentDirectoryPath}/${((Math.random() * 1000) | 0)}.jpg`;
 savePhoto() {
        let index = this.props.curentImage;
        let url = this.props.imaeDataUrl[index];
        if (Platform.OS === 'ios') {  //ios图片保存
            let promise = CameraRoll.saveToCameraRoll(url);
            promise.then(function (result) {
                alert("已保存到系统相册")
            }).catch(function (error) {
                alert('保存失败!\n' + error);
            });
        } else {  //Android  先下载到本地
            let DownloadFileOptions = {
                fromUrl: url,          //下载路径
                toFile: this.androidDownPath     // Local filesystem path to save the file to
            }
            let result = RNFS.downloadFile(DownloadFileOptions);
            let _this = this;
            result.promise.then(function (val) {
                console.log("文件保存成功:" + _this.androidDownPath)
                let promise = CameraRoll.saveToCameraRoll(_this.androidDownPath);
                promise.then(function (result) {
                    // console.error(JSON.stringify(result))
                    alert("已保存到系统相册")
                }).catch(function (error) {
                    alert('保存失败!\n' + error);
                });

            }, function (val) {
                console.log('Error Result:' + JSON.stringify(val));
            }
            ).catch(function (error) {
                console.log(error.message);
            });
        }

    }

看下效果图:


8D8A5A7B153406C5720D4C2D5226E459.jpg
60139DFB3BF6D641152DD25E3294C4B2.jpg

实现起来并不是很难, ios 的请参考 react native 实现图片预览

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 想着一个他 已经长成成熟的样子 仿佛就在昨天还是小孩 转眼之间变成了一个帅气的小伙子 离开了我的身旁 为了明天的美...
    田萍阅读 175评论 0 6
  • 刻在我心底的:像梦一样自由 外面起风了,真他妈的大,苏迪罗就像个调皮的孩子和大家在开玩笑,前一会瓢泼大雨,这...
    强强爱做梦阅读 828评论 0 0
  • 这几天心急如燎,因为妈妈回了老家,买了个老人智能机却由于瞎掇弄,开始是把我和小妹拉进了黑名单,每打电话都是正在通话...
    咫尺为邻阅读 297评论 0 0
  • 小白兔今年18岁了,很高兴见证她的成年礼,和她一起渡过这么特殊的两天—17岁的最后一天和18岁的第一天。 刚见她的...
    joyceWanggaojie阅读 342评论 1 0