React Native 保存图片到相册IOS && Android

声明：以下内容为本人亲自尝试可用 可用保存远端url图片，也可以保存已知编码的base64图片

请万分注意，如果你使用的是writeFile（react-native-fs的一个api）当你的react-native-fs的版本是2.9.11 而非2.11.x以后的版本，会出现request 4 arguments but find 5 arguments的bug，这个是该版本的问题，请确认测试服务器或者生产服务器上的版本是否是2.11.x版本之后的

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

import RNFS from 'react-native-fs';

//保存图片---远端图片http://www.hangge.com/blog/images/logo.png

  saveImg = () => {

    if (Platform.OS === 'android') {

      let dirs = RNFS.DocumentDirectoryPath;

      const saveImageUrl = "http://www.hangge.com/blog/images/logo.png"

      const downloadDest = `${dirs}/${((Math.random() * 10000000) | 0)}.png`; // 请注意  图片名字不能取网址，目录类型，否则会解析错误！！！本人就在这里坑了1天，这边的dirs是自动获取的路径，算是保存的默认路径，开发者不必管它，它是固定的目录地址！

      // android保存远端资源图片 需要先下载该图片到默认目录下 然后再拷贝到相册目录下

      const ret = RNFS.downloadFile({ fromUrl: saveImageUrl, toFile: downloadDest });

      ret.promise.then(res => {

        if (res && res.statusCode === 200) {

          var promise = CameraRoll.saveToCameraRoll("file://" + downloadDest);

          promise.then(function (result) {

            Toast.show("图片已保存至相册!")

          }).catch(function (error) {

            Toast.show("保存失败!")

          })

        }

      }).catch((error) => console.log(error))

    } else {

      // IOS保存相册 还需要在XCODE配置权限（权限配置参考https://blog.csdn.net/hzxOnlineOk/article/details/92685613）

      const imgUrl = "http://www.hangge.com/blog/images/logo.png"

      const promise = CameraRoll.saveToCameraRoll(imgUrl);

      promise.then(function (result) {

        Toast.show('图片已保存至相册！');

      }).catch(function (error) {

        Toast.show('保存失败！');

      });

    }

  }

//保存图片---本地base64（无需下载，直接RNFS.writeFile写入到默认目录下，等下再由默认目录拷贝至相册目录）

  saveImg = async (imgBase) => {

    if (Platform.OS === 'android') {

      const storeLocation = `${RNFS.ExternalDirectoryPath}`;

      const downloadDest = `${storeLocation}/${new Date().getTime()}qr.png`;

      const imageData = imgBase.split('data:image/png;base64,')[1];

      try {

// 注：必须写以下PermissionsAndroid.requestMultiple，请求权限，否则逻辑会走入Toast.show("保存失败!", e);

并且访问权限的操作必须在writeFile之前！！！

            await PermissionsAndroid.requestMultiple([

                  PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,

                  PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,

            ]);

            await RNFS.writeFile(downloadDest, imageData, 'base64');

            await CameraRoll.saveToCameraRoll("file://" + downloadDest);

            Toast.show("图片已保存至相册!")

       } catch (e) {

            console.log('err', e);

            Toast.show("保存失败!", e);

       }

    } else {

      // IOS使用已知base64编码的图片，保存到相册

      var promise = CameraRoll.saveToCameraRoll(imgBase);

      promise.then(function (result) {

        Toast.show('图片已保存至相册！');

      }).catch(function (error) {

        Toast.show('保存失败！');

      });

    }

  }