![React Native 保存图片到手机相册,同时支持IOS&安卓](https://cdn.portal.levenx.com/levenx-world/gFQyQS2vmxX_uOZG.jpg)
React Native 保存图片到手机相册,同时支持IOS&安卓
![小白的头像](https://cdn.fmlg1688.cn/levenx-world/e65cf3d9777444959d7d2217e6133590.webp)
背景介绍
在许多React Native应用中,用户通常希望能够保存图片到设备的相册中。本文将介绍如何使用React Native的CameraRoll组件和相关的API,实现保存图片到相册的功能。
步骤1:安装依赖
首先,确保您的React Native项目已经正确配置和运行。然后,通过以下命令安装所需的依赖:
javascriptnpm install @react-native-community/cameraroll npm install react-native npm install react-native-fs
步骤2:导入所需的模块
在需要使用保存图片功能的组件中,导入所需的模块:
typescriptimport { Platform } from 'react-native'; import CameraRoll from '@react-native-community/cameraroll'; import RNFS from 'react-native-fs';
步骤3:请求相册访问权限(兼容IOS和android)
需要注意
- 使用CameraRoll安卓端在保存前需要请求权限,iOS端使用该方法会默认请求权限
- 安卓端保存图片,只接受本地图片,所以需要先存在本地
javascriptimport { 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, }; };