美文网首页
React Native 图片保存到本地相册(ios & and

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

作者: 叫兽儿 | 来源:发表于2018-11-26 17:10 被阅读0次

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

    完成!

    相关文章

      网友评论

          本文标题:React Native 图片保存到本地相册(ios & and

          本文链接:https://www.haomeiwen.com/subject/rvwbqqtx.html