一, 需求分析
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))
- }
- })
- }
来源: https://www.cnblogs.com/jackson-zhangjiang/p/9556468.html