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

简介: 上一篇 介绍了ios 的图片预览 和图片保存 ,Android 实现起来就稍微复杂点,image.pngandroid 的 CameraRoll 只支持 本地文件,解决方式就是把图片下载到本地 ,然后调用这个保存到相册的方法。

上一篇 介绍了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 实现图片预览

目录
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
3月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
3月前
|
前端开发
React 仿淘宝图片放大镜功能
React 仿淘宝图片放大镜功能
|
23天前
|
Android开发
Android保存图片到相册(适配android 10以下及以上)
Android保存图片到相册(适配android 10以下及以上)
21 1
|
2月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
2月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
34 0
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
3月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
54 1
|
3月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
41 3