[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 ...
随机推荐
- IntelliJ IDEA 创建java application
1.打开IntelliJ IDEA,选择File——New——Project... 2.选择左侧的java,然后在右侧的Project SDK 中添加 java 环境目录,点击Next 3. 在下面的 ...
- WPF 高级篇 MVVM (MVVMlight) 依赖注入使用Messagebox
原文:WPF 高级篇 MVVM (MVVMlight) 依赖注入使用Messagebox MVVMlight 实现依赖注入 把弹框功能 和接口功能注入到各个插件中 使用依赖注入 先把所有的ViewMo ...
- instr函数的用法
1.定义 instr函数返回要截取的字符串在源字符串中的位置 语法如下: instr( string1, string2 [, start_position [, nth_appearance ] ...
- Delphi - TIdFTP 两个重要函数
TIdFTP 两个重要函数 项目开发过程中发现,直接对于服务器上的文件/路径进行处理,是很危险的事情,因为一旦文件/路径不存在,程序就会抛异常,影响客户体验.所以在对服务器上的文件/路径进行访问之前, ...
- vue chunk-elementUI.3d5a4739.js 过大,网页打开慢开启gzip压缩
如下 upstream sems { server weight= fail_timeout=; } server { listen ; server_name www.serve.com; loca ...
- cache verilog实现
cache原理: https://www.cnblogs.com/mikewolf2002/p/10984976.html cache的verilog实现 实现的cache是16k, 4way组相连c ...
- android studio学习----通过libs来导入jar包
百度经验有一种方法: 1 点击启动AndroidStudio,启动后的界面如图所示. 2 复制你需要添加的jar,并将其黏贴到app— —src— —main— —libs文件夹下,可运行的Andro ...
- CRM产品主数据在行业解决方案industry solution中的应用
AG3, choose this role: Create a new Acquisition Contracts: Here our product advances search will be ...
- Fundebug前端JavaScript插件更新至1.8.2,修复2个小BUG
摘要: 修复2个BUG,请大家及时更新. Fundebug前端异常监控服务 Fundebug是专业的程序异常监控平台,我们JavaScript插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各 ...
- MySQL Backup--使用mysqldump依次备份所有数据库
某些场景下需要将数据库分开备份,有些场景又需要将所有数据库合在一起备份,特此整理此备份脚本 #!/bin/bash ##======================================== ...