您现在的位置是:首页 > 文章详情

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

日期:2018-07-13点击:556

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

img_a2cbc6ba60f63e6674aa90145a4a3da2.png
image.png

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

看下效果图:


img_8d8a5a7b153406c5720d4c2d5226e459.jpe
8D8A5A7B153406C5720D4C2D5226E459.jpg
img_60139dfb3bf6d641152dd25e3294c4b2.jpe
60139DFB3BF6D641152DD25E3294C4B2.jpg

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

原文链接:https://yq.aliyun.com/articles/639137
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章