react-native 保存图片简单封装（ios、androi

安装：@react-native-community/cameraroll
官网：https://www.npmjs.com/package/@react-native-community/cameraroll
参考来源：https://www.cnblogs.com/jackson-yqj/p/9556468.html、https://blog.csdn.net/huhu_study/article/details/80826821

新建util.js

import {Platform,PermissionsAndroid} from 'react-native';
import CameraRoll from "@react-native-community/cameraroll";
const RNFS = require('react-native-fs');

//外部存储权限
async function hasAndroidPermission() {
    const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;

    const hasPermission = await PermissionsAndroid.check(permission);
    if (hasPermission) {
        return true;
    }

    const status = await PermissionsAndroid.request(permission);
    return status === 'granted';
}

module.exports = {

    //保存线上图片到系统相册  android  ios  均可用
    async saveImage(url, successCallback, errorCallback) {
        if (Platform.OS === "android" && !(await hasAndroidPermission())) {
            return;
        }

        let dirs = Platform.OS === 'ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath;
        let fileName = `热狐美术-${new Date().getTime()}.png`  //图片保存后的名字
        let downloadDest = `${dirs}/${fileName}`;   //文件路径
        const ret = RNFS.downloadFile({fromUrl: url, toFile: downloadDest});
        ret.promise.then(res => {
            if (res.statusCode === 200) {
                let promise = CameraRoll.save('file://' + downloadDest, {type: 'photo', album: 'rehu'})  //rehu为相册名
                promise.then((res) => {
                    successCallback(res)
                }).catch((err) => {
                    errorCallback(err)
                })
            }
        }).catch((err) => {
            console.log('下载失败==', err)
            errorCallback(err)
        })
    },

    //将缓存区的图片保存到相册(用户截图保存)    file:///data/user/0/com.dalaudechina.app.DadCam/cache/ReactNative-snapshot-image2673721500509699396.jpg
    async saveLocalImage(tempLocalUri,successCallback,errorCallback){
        if (Platform.OS === "android" && !(await hasAndroidPermission())) {
            return;
        }
        let promise = CameraRoll.save(tempLocalUri, {type: 'photo', album: 'rehu'})  //rehu为相册名
        promise.then((res) => {
            successCallback(res)
        }).catch((err) => {
            errorCallback(err)
        })
    },

}

使用 util.js
一、保存线上图片

    import Util from "../util";

    savePhoto(url){
        console.warn('保存图片',url)
        Util.saveImage(url,(res)=>{
            console.log('保存成功====1111',res)
        },(err)=>{
            console.log('保存失败====',err)
        })
    }

二、截图某个视图View

import React, {Component} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'
import ViewShot from "react-native-view-shot";
import Util from './common/util'
import MyToast from "./common/MyToast";
class ViewShotTest extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount () {
        this.refs.viewShot.capture().then(uri => {
            console.log("do something with ", uri);
            this.savePhoto(uri)
        });
    }
    savePhoto(url){
        console.warn('保存图片',url)
        Util.saveLocalImage(url,(res)=>{
            console.log('保存成功====1111',res)
            MyToast.show('图片保存成功');
        },(err)=>{
            MyToast.show('图片保存失败')
            console.log('保存失败====',err)
        })
    }


    render() {
        return (
            <View style={{flex: 1}}>
                <ViewShot ref="viewShot" options={{ format: "jpg", quality: 0.9 }} style={{backgroundColor:'red',flex:1}}>
                    <Text>...Something to rasterize...</Text>
                </ViewShot>
            </View>
        );
    }
}

export default ViewShotTest;
const styles = StyleSheet.create({})

备注：RN版本：0.60.0 ， 在 ios 安装@react-native-community/cameraroll 时 会报'React/RCTNetworking.h' file not found

根据以下步骤即可(@react-native-community/cameraroll github官网报错中也有解释)
附：

"${PODS_ROOT}/Headers/Public/React-RCTNetwork"