[RN] React Native 图片保存到相册(支持 Android 和 ios)
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)的更多相关文章
- [RN] React Native 图片懒加载库 animated-lazy-image
React Native 图片懒加载库 animated-lazy-image 官方Github地址: https://github.com/danijelgrabez/lazy-image 使用效果 ...
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- [RN] React Native 实现图片预览
[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
- [RN] React Native 常见基本问题归纳总结
[RN] React Native 常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...
- [RN] React Native 幻灯片效果 Banner
[RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...
- [RN] React Native 常用命令行
[RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...
- 小程序图片保存的相册授权失败问题,原接口wx.openSeting()已经废弃了的解决办法
项目中使用的是wepy框架开发的小程序,,, 使用场景是,用户点击下载图片的时候,要调起授权button(小程序拉起授权的功能都集成在了button组件,所以这里需要用到button组件里的一个ope ...
- [RN] React Native 关闭所有黄色警告
[RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...
- [RN] React Native 实现 类似QQ 登陆页面
[RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...
随机推荐
- HTML+css基础 表格标签table Table标签属性 td标签属性
表格标签table: 他是由行与列构成,最小单位是单元格. 行标签 <tr></tr> 单元格标签<td></td> Table标签属性: Bor ...
- 在开发中进入一个方法后想要到原来那行 ctrl+alt+左 回到上一步 ctrl+alt+右 回到下一步
在开发中进入一个方法后想要到原来那行 ctrl+alt+左 回到上一步ctrl+alt+右 回到下一步
- 【C++】Debug模式和Release模式的区别
VS中的程序有两种编译模式:Debug模式和Release模式. Debug通常称为调试版本,通过一系列编译选项的配合,编译结果通常包含调试信息,而且不做任何优化,以为开发人员提供强大的应用程序调试能 ...
- Intellij Idea 自动更新资源和类
Run -> Edit Configurations 进入配置页 On update action:当发现更新时的操作 选择Update classes and resources On ...
- 【FPGA】Verilog实现交通信号灯
大二数字电路的课程设计中,有一份日常作业使用Xilinx FPGA实现简易交通信号灯,但很可惜当时时间有限,没能最终完成.正好在这一学期选修SOPC设计课程,同样采用了Xilinx FPGA,故打算重 ...
- golang --strings 下常用函数api
1. func Compare(a, b string) int {} 比较返回一个按字典顺序比较两个字符串的整数.如果a == b则结果为0,如果a <b则结果为-1,如果a> b则结果 ...
- Docker 快速安装&搭建 Mysql 环境
欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...
- Kafka学习笔记2--Kafka的服务端配置
下载解压 kafka 后,在 kafka/config 下有 3 个配置文件与主题的生产.消费相关. server.properties--服务端配置 producer.properties--生产端 ...
- 还不错的PHP导出EXCEL函数挺好用的
直接上函数吧 //导出 $data内容二维数组 $title各个标题 $filename表名称 function exportexcelinfo($data=array(),$title=array( ...
- 【翻译】Tusdotnet中文文档(3)自定义功能和相关技术
自定义功能和相关技术 本篇按照如下结构翻译 自定义功能 自定义数据仓库 相关技术 架构和总体概念 自定义数据仓库 tusdotnet附带一个存储库TusDiskStore,它将文件保存在磁盘上的一个目 ...