React Native 图片保存到相册(支持 Android 和 ios)

原理:

IOS用 RN自带的 CameraRoll,

Android 使用 不成功,需要 react-native-fs  和  CameraRoll 配合使用

已经封装成类:

ImageUtil.js

'use strict';
import React from 'react';
import {CameraRoll, Platform} from 'react-native';
import ToastUtil from "./ToastUtil"; const RNFS = require('react-native-fs'); let ImageUtil = {
saveImg: (img) => {
if (Platform.OS === 'ios') {
let promise = CameraRoll.saveToCameraRoll(img, 'photo');
promise.then(function (result) {
ToastUtil.showToast('保存成功!地址:\n' + result);
}).catch(function (error) {
ToastUtil.showToast('保存失败!\n' + error);
});
} else {
const RNFS = require('react-native-fs'); //文件处理
const storeLocation = `${RNFS.DocumentDirectoryPath}`;
let pathName = new Date().getTime() + Math.random(, ) + ".png";
let downloadPath = `${storeLocation}/${pathName}`;
const ret = RNFS.downloadFile({fromUrl: img, toFile: downloadPath});
ret.promise.then(res => {
if (res && res.statusCode === ) {
var promise = CameraRoll.saveToCameraRoll("file://" + downloadPath);
promise.then(function (result) {
ToastUtil.showToast('保存成功!地址:\n' + result);
}).catch(function (error) {
ToastUtil.showToast('保存失败!\n' + error);
})
}
})
} }, }; module.exports = ImageUtil;

Android添加权限:

 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

参考:

https://www.jianshu.com/p/6242ec32f75f

本博客地址: wukong1688

本文原文地址:https://www.cnblogs.com/wukong1688/p/11004440.html

转载请著名出处!谢谢~~

[RN] React Native 图片保存到相册(支持 Android 和 ios)的更多相关文章

  1. [RN] React Native 图片懒加载库 animated-lazy-image

    React Native 图片懒加载库 animated-lazy-image 官方Github地址: https://github.com/danijelgrabez/lazy-image 使用效果 ...

  2. [RN] React Native 下实现底部标签(支持滑动切换)

    上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...

  3. [RN] React Native 实现图片预览

    [RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...

  4. [RN] React Native 常见基本问题归纳总结

    [RN] React Native  常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...

  5. [RN] React Native 幻灯片效果 Banner

    [RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...

  6. [RN] React Native 常用命令行

    [RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...

  7. 小程序图片保存的相册授权失败问题,原接口wx.openSeting()已经废弃了的解决办法

    项目中使用的是wepy框架开发的小程序,,, 使用场景是,用户点击下载图片的时候,要调起授权button(小程序拉起授权的功能都集成在了button组件,所以这里需要用到button组件里的一个ope ...

  8. [RN] React Native 关闭所有黄色警告

    [RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...

  9. [RN] React Native 实现 类似QQ 登陆页面

    [RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...

随机推荐

  1. Python C++ OpenCV TensorFlow手势识别(1-10) 毕设 定制开发

    Python C++ OpenCV TensorFlow手势识别(1-10) 毕设 支持定制开发 (MFC,QT, PyQt5界面,视频摄像头识别) QQ: 3252314061 效果如下:

  2. maven setting 配置仓库,pom.xml中repository不起作用

    问题描述 最近做java项目,需要使用公司自己搭建的maven仓库,但是有些包公司的仓库中没有,导致下载失败. 项目环境 jdk:1.8 maven:3.5 问题原因分析 maven的setting文 ...

  3. pytorch-04-激活函数

    sigmoid函数: 越大的负数越接近0,越大的正数越接近1缺点:(1)造成梯度消失:该函数在靠近1和0的两端,梯度几乎变成0,梯度下降法:梯度乘上学习率来更新参数,如果梯度接近0,那么没有任何信息来 ...

  4. 三大类sql语句——该记录是本人以前微博上的文章

    一.DML语句二.DDL语句三.事务控制语句一.DML语句-Data Mulipulation LanguageDML语句数据操作野菊执行后会生成一个事务,事务需要提交才能够永久生效,在commit前 ...

  5. antd Table 可伸缩列没有效果

    把antd 中的Table可伸缩示例代码,下载到自己的代码中发现,鼠标放到表格的边框上,并没有出现可伸缩鼠标样式,最后的解决方法是在css样式中添加下面的样式,就解决问题了. .react-resiz ...

  6. Redis学习之ziplist压缩列表源码分析

    一.压缩列表ziplist在redis中的应用 1.做列表键 当一个列表键只包含少量列表项,并且每个列表项要么是小整数,要么是短字符串,那么redis会使用压缩列表作为列表键的底层实现 2.哈希键 当 ...

  7. Java中接口和Sala中的特质的区别?

    1.先要区分是Java中哪个版本的接口,因为Java中不同版本接口是不一样2.Java8之前的接口(不包含Java8),这个版本的接口只能属性和抽象方法,和Scala中的特质有完全的不用因为Scala ...

  8. WPF DataGird 类似Excel筛选效果 未成品

    这个本是针对MSDN上所写的代码,不过写一半不想写了. 不想浪费代码,是个半成品的半成品. 效果图: 思路: 利用PopUp来做显示层. 显示层中的数据则是绑定到Datagrid的数据. popup中 ...

  9. 从时序异常检测(Time series anomaly detection algorithm)算法原理讨论到时序异常检测应用的思考

    1. 主要观点总结 0x1:什么场景下应用时序算法有效 历史数据可以被用来预测未来数据,对于一些周期性或者趋势性较强的时间序列领域问题,时序分解和时序预测算法可以发挥较好的作用,例如: 四季与天气的关 ...

  10. mvc_第二遍

    之前,我们学习了mvc最基本的架构和用法. 在学习了真正的属性.委托和列表之后,我们就可以使用微软提倡的模型了. 需要注意的是,这种模型以及它的工作方式,身上有着浓浓的微软印记.在方便的同时,也要自行 ...