React Native 图片保存到本地相册(ios & android)

IOS配置CameraRoll API

• 用Xcode打开项目, 找到Libraries目录，右键选择Add Files to [your project's name]
  

• 在{project}/node_modules/react-native/Libraries/CameraRoll中找到RCTCameraRoll.xcodeproj文件，并添加
  

• 在XCode中选择你的项目， 选择General并将RCTCameraRoll.xcodeproj下的Products文件夹中的静态库文件.a文件添加到Link Binary With Libraries中,拖过去即可
  

• 配置访问相册的权限，打开Info.plist，添加Privacy - Photo Library Additions Usage Description 和 Privacy - Photo Library Usage Description
  

Android可以直接访问CameraRoll API

import { Platform, CameraRoll } from 'react-native';
import RNFS from 'react-native-fs';

应用

网络图片保存到相册

/**
 * 下载网页图片
 * @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)
      })
}

内存图片保存到相册

/**
 * 保存图片到相册
 * @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))
        }

    })

}

完成！