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 DescriptionPrivacy - 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))
        }

    })

}

完成!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 因为要结局swift3.0中引用snapKit的问题,看到一篇介绍Xcode8,swift3变化的文章,觉得很详细...
    uniapp阅读 10,131评论 0 12
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,056评论 3 119
  • 进入思导管理师认证的第二天啦。 上午陈老师,设置的疑问和收获环节,帮助大家进一步加深昨天内容的印象,同时,通过疑问...
    Nicoleqiu99阅读 1,895评论 0 1
  • 寄赋慈溪沈氏爱菊序 作者:陈著 我不识爱菊,却与菊相识。 寒前后著花,土中央为色。 微苦养长寿,晚香擅清德。 滔滔...
    江南莫之阅读 3,831评论 0 4
  • 今天我和小朋友们一起玩。有小文姐姐。还有点点姐姐、多多妹妹、晓旭弟弟,我和大家一起玩:玩老鹰捉小鸡,捉迷藏、...
    伽文阅读 493评论 0 0

友情链接更多精彩内容