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 中把一个list 列表分组/分块

    比如:将list:[1,2,3,4,5,6,7,8,9]按照下标顺序分成3组:[1,2,3] [4,5,6] [7,8,9]或分成5组:[1,2,] [3, 4] [5,6] [7, 8] [ 9 ] ...

  2. odoo action

    动作的加载: 刷新视图页面执行load_views方法 /web/dataset/call_kw/model_name/load_views 在odoo/models.py的BaseModel中有一个 ...

  3. visualstu studio的 pdb调试文件

    1. 该博客介绍了pdb文件的概念,作用. 将该博文复制到最后了. https://devblogs.microsoft.com/devops/understanding-symbol-files-a ...

  4. SQL -------- TOP 查询前几行

    SELECT TOP 子句用于指定要返回的记录数量.并不是所有的数据库系统都支持SELECT TOP子句.MySQL支持LIMIT子句来选择有限数量的记录,而Oracle使用ROWNUM. top 后 ...

  5. 并查集 + 路径压缩(经典) UVALive 3027 Corporative Network

    Corporative Network Problem's Link Mean: 有n个结点,一开始所有结点都是相互独立的,有两种操作: I u v:把v设为u的父节点,edge(u,v)的距离为ab ...

  6. 在eclipse中,用maven创建一个web项目工程

    1.在eclipse中用maven创建项目,右键new>>Maven Project 2.点击next继续 3.点击next继续,选择maven-archetype-webapp, 4.点 ...

  7. spring好文章整理

    彻底搞明白Spring中的自动装配和Autowired IDEA编译spring 5源码 Spring源码——IDEA读Spring源码环境搭建 导入spring源码org.springframewo ...

  8. [转] golang 字符串比较是否相等

    1 前言 strings.EqualFold不区分大小写,"==" 区分且直观. 2 代码 golang字符串比较的三种常见方法 fmt.Println("go" ...

  9. 一文读懂Java线程状态转换

    前言 本文描述Java线程线程状态及状态转换,不会涉及过多理论,主要以代码示例说明线程状态如何转换. 基础知识 1. 线程状态 Thread源码中的状态说明: 线程可以有6种状态: New(新建) R ...

  10. Java集合Map基本方法

    jdk1.7 api中的方法摘要: 参考java集合大全图:https://www.cnblogs.com/xkzhangsanx/p/10889114.html Map为所有Map子类的接口.