react native android 实现图片预览 图片保存 react-native-image-zoom-viewer
上一篇 介绍了ios 的图片预览 和图片保存 ,Android 实现起来就稍微复杂点,
android 的 CameraRoll 只支持 本地文件,解决方式就是把图片下载到本地 ,然后调用这个保存到相册的方法。
这里用到的是 react-native-fs
关于这个 react-native-fs 的使用 git上介绍的已经很详细了,大家可以去看下如何使用的。
下面介绍下:android保存图片到本地相册
1.在android 工程下的
添加 读取外部存储的权限:
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
- 下载图片并保存
这里展现部分代码: 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); }); } }
看下效果图:
实现起来并不是很难, ios 的请参考 react native 实现图片预览
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
cordova之旅之初识
emmmm, 一直徘徊在移动端采用什么技术比较好,一直也没有找到,让我为了一个移动端而去学习一波react全家桶是不现实的操作,反观自己的技术栈,通过长时间的对比和剖析找到了入口点,不管了先会写再说吧,没有过的评价都是瞎BB,cordova + ionic +angular6之旅正式开启 cordova是什么?为什么我要从它入手? 按照我浅浅的理解,cordova是让前端人员仅仅使用已掌握的知识达到JS也能控制访问设备硬件的一个中间层,由前端人员编写相应的JS代码,由cordova来做中间人吧JS代码的意思转译成各种设备能听得懂的“命令”从而做相应的操作的一种机制。 之所以从他入手是,技术栈是ANGULAR,移动端自然而然的就切换到了ionic但是呢,其实还有nativescript,个人更看好ns,但是呢由于呢ns刚出现的时间不是很长,社区自然就弱啦,cordova的前身如果我讲得没有错的话是phonegap,算是一种老技术了,已经有很完善的文档以及很多人都采坑了,遇到坑一搜一大把emmm,废话不多说啦,此篇介绍环境配置到创建一个应用 环境搭建 环境搭建可谓是非常非常关键啊,搭建不好...
- 下一篇
ViewPager实现App引导页面
ViewPager使用App引导页面 相关代码已经上传到仓库的ViewPager文件夹内 viewPager实现引导页面.gif 项目的基础配置就不多做赘述了,不清楚的可以查看我的这篇文章。 结构目录.png 页面是由8张图片组成的,分别是4张透明背景的文字图片和4张黑底的图片图片 图片素材.png 文字滑动 在module包下创建guide包,创建GuideActivity import kotlinx.android.synthetic.main.activity_guide.* /** * 引导页面 */ class GuideActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_guide) } } 1) 创建res-drawable-hdpi文件夹,这一步很关键,因为我们的素材文件有点大,如果不放在hdpi文件夹,而是放在普通...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2整合Redis,开启缓存,提高访问速度
- MySQL8.0.19开启GTID主从同步CentOS8
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS8编译安装MySQL8.0.19
- CentOS8安装Docker,最新的服务器搭配容器使用