React Native之图片保存到本地相册(ios android)
一,需求分析
1,react native保存网络图片到相册，iOS端可以用RN自带的CameraRoll完美解决，但是android端不支持从网络保存图片。
2,只保存一张图片到本地相册(比如生成的邀请卡 付款码等)
二,介绍与iOS简单配置
2.1 介绍
saveToCameraRoll(tag, type?)方法介绍
（1）这个是 CameraRoll 的一个静态方法，作用是保存一张图片到相册。
（2）参数 tag 是图片的地址，为字符串类型。其内容根据不同的设备也有所不同：
在 Android 上：tag 是本地地址，例如："file:///sdcard/img.png"
在 iOS 上：tag 可以是 url、assets-library、内存图片中的一种。
（3）参数 type 不是必须的，可选值是'photo' 或 'video'。用来表示存的是图片还是视频。不指定的话程序也会根据后缀自行判断。（结尾为 .mov 或 .mp4 为视频，其它为图片）
2.2 CameraRoll API iOS链接配置
第一步
添加CameraRoll库(node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj)到XCode的Libraries分组里
第二步
将 RCTCameraRoll.xcodeproj下的Products文件夹中的静态库文件（.a文件，拖到Xcode General--Linked FrameworksLibraries下。
第三步
配置访问相册的权限，如果不配置Privacy - Photo Library Additions Usage Description到Info.plist下，会出现闪退情况。在Info.plist添加如下：
<key>NSPhotoLibraryAddUsageDescription</key>
<string>使用相册</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>使用相册</string>
Android可以直接访问CameraRoll API
import { Platform, CameraRoll } from 'react-native';
import RNFS from 'react-native-fs';
三,应用实例
3.1 网络图片保存到相册(支持iOS Android)
下载网络图片,并保存到相册中：
/**
* 下载网页图片
* @param uri 图片地址
* @returns {*}
*/
export const DownloadImage=(uri)=> {
if (!uri) return null;
return new Promise((resolve, reject) => {
let timestamp = (new Date()).getTime();//获取当前时间错
let random = String(((Math.random() * 1000000) | 0))//六位随机数
let dirs = Platform.OS === 'ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath; //外部文件，共享目录的绝对路径（仅限android）
const downloadDest = `${dirs}/${timestamp+random}.jpg`;
const formUrl = uri;
const options = {
fromUrl: formUrl,
toFile: downloadDest,
background: true,
begin: (res) => {
// console.log('begin', res);
// console.log('contentLength:', res.contentLength / 1024 / 1024, 'M');
},
};
try {
const ret = RNFS.downloadFile(options);
ret.promise.then(res => {
// console.log('success', res);
// console.log('file://' + downloadDest)
var promise = CameraRoll.saveToCameraRoll(downloadDest);
promise.then(function(result) {
// alert('保存成功！地址如下：\n' + result);
}).catch(function(error) {
console.log('error', error);
// alert('保存失败！\n' + error);
});
resolve(res);
}).catch(err => {
reject(new Error(err))
});
} catch (e) {
reject(new Error(e))
} }) }
使用实例
//保存图片
DownloadImage=(uri)=>{
Download.DownloadImage(uri).then((res)=>{
if(res.statusCode==200){
Toast.show('图片保存成功')
}else{
Toast.show('图片保存失败')
}
})
.catch((error)=>{
Toast.show('图片保存失败')
console.log(error)
})
}
3.2 内存图片保存到相册(支持iOS Android)
将内存图片保存到相册中:
/**
* 保存图片到相册
* @param ImageUrl 图片地址
* @returns {*}
*/
export const DownloadLocalImage=(ImageUrl)=> {
if (!ImageUrl) return null;
return new Promise((resolve, reject) => {
try {
var promise = CameraRoll.saveToCameraRoll(ImageUrl);
promise.then(function(result) {
resolve({statusCode:200});
//alert('保存成功！地址如下：\n' + result);
}).catch(function(error) {
console.log('error', error);
// alert('保存失败！\n' + error);
});
} catch (e) {
reject(new Error(e))
} }) }
