React Native 保存图片到手机相册，同时支持IOS&安卓

背景介绍

在许多React Native应用中，用户通常希望能够保存图片到设备的相册中。本文将介绍如何使用React Native的CameraRoll组件和相关的API，实现保存图片到相册的功能。

步骤1：安装依赖

首先，确保您的React Native项目已经正确配置和运行。然后，通过以下命令安装所需的依赖：

javascript
npm install @react-native-community/cameraroll
npm install react-native
npm install react-native-fs

步骤2：导入所需的模块

在需要使用保存图片功能的组件中，导入所需的模块：

typescript
import { Platform } from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';
import RNFS from 'react-native-fs';

步骤3：请求相册访问权限（兼容IOS和android）

需要注意

1. 使用CameraRoll安卓端在保存前需要请求权限，iOS端使用该方法会默认请求权限
2. 安卓端保存图片，只接受本地图片，所以需要先存在本地

javascript
import { useCallback } from 'react';
import { PermissionsAndroid, Platform } from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';
import RNFS from 'react-native-fs';
import { getI18n, useTranslation } from 'react-i18next';

const hasAndroidPermission = async () => {
  if (Number(Platform.Version) >= 33) {
   // 版本33及以上默认拥有写入权限
    return true;
  }
  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';
};

export const useParticipationQrCode = () => {
  const { t } = useTranslation();

	// 保存到相册
  const saveToAlbum = useCallback(
    async (event) => {
      const { action, payload } = event;
      if (action === 'savetoalbum') {
        if (Platform.OS === 'android' && !(await hasAndroidPermission())) {
          return Toast({ message: getI18n().t('Home:failed_to_save_qr_code_content') });
        }
        try {
          const base64Data = payload?.url?.replace(/^data:image\/\w+;base64,/, '');
          const timestamp = Date.now();
          const fileName = `image_${timestamp}.png`;
           // 注意 安卓端保存图片，只接受本地图片，所以需要先存在本地
          const filePath = `${RNFS.CachesDirectoryPath}/${fileName}`;
          await RNFS.writeFile(filePath, base64Data, 'base64');
          await CameraRoll.save(filePath, { type: 'photo' });
          // 保存好之后删除之前写入的本地图片
          await RNFS.unlink(filePath);
          Toast({ message: t('Home:save_qr_code_content_successfully') });
        } catch (error) {
          console.log('Failed to save image.', error);
        }
      }
    },
    [t],
  );

  return {
    saveToAlbum,
  };
};