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. linux kernel debug

    1. sysrq http://www.chinaunix.net/old_jh/4/902287.html 常用的SysRq命令(序列)  重启机器的SysRq命令序列是 k(SAK) s(sync ...

  2. .tar.gz 文件和 .tar.xz 文件的区别

    tar.gz and tar.xz both are compressed tar-files, but with different compression methods. tar.gz is c ...

  3. Rider中Winform开发支持预览(5)

    1.Rider .netCore3.0 winform设计器支持预览,这点vs目前还不支持. 2.不过winform下控件选择工具栏都是没有图标的

  4. c# 类实例序列化反序列化json文件 (原发布 csdn 2017-10-01 20:02:12)

    前言 前段时间使用了net.json保存对象数据.添加完成后,测试发现300多实例数据保存加载json文件,速度比原方式(BinaryFormatter)慢.但是功能加上后也懒再删掉代码了,索性就采用 ...

  5. STMP发送邮件(C#)

    记录一下使用SMTP协议发送邮件 public void Mail() { try { System.Net.Mail.SmtpClient client = new System.Net.Mail. ...

  6. c# asp.net core取当月第一天和最后一天及删除最后一个字符的多种方法

    当月第一天0时0分0秒 DateTime.Now.AddDays( - DateTime.Now.Day).Date 当月最后一天23时59分59秒 DateTime.Now.AddDays( - D ...

  7. ASP.NET Core 应用程序状态

    在ASP.NET Core中,由多种途径可以对应用程序状态进行管理,使用哪种途径,由检索状态的时机和方式决定. 应用程序状态指的是用于描述当前状况的任意数据.包括全局和用户特有的数据. 开发人员可以根 ...

  8. 微服务架构 ------ 插曲 hikari连接池的配置

    开胃菜:据说hikari连接池很快,快到让另一个连接池的作者抛弃对自己连接池的维护,并且强烈推荐使用hikari 连接池目前我们项目使用的有两个 一个是Druid , 一个是 Hikari, 其中Dr ...

  9. Linux 集群概念 , wsgi , Nginx负载均衡实验 , 部署CRM(Django+uwsgi+nginx), 部署学城项目(vue+uwsgi+nginx)

    Linux 集群概念 , wsgi , Nginx负载均衡实验 , 部署CRM(Django+uwsgi+nginx), 部署学城项目(vue+uwsgi+nginx) 一丶集群和Nginx反向代理 ...

  10. git操作:查看分支、删除本地分支和远程分支

    1.查看本地分支:git branch 2.查看远程分支:git branch -r 或 git branch --remote 3.查看本地和远程的所有分支:git branch -a 4.删除本地 ...