React Native 保存图片的简单封装

在React Native中，保存图片需要使用一些特定的API和第三方库。以下是一个简单的封装，可以帮助你轻松地将图片保存到设备相册或文件系统。
首先，你需要安装一个名为react-native-fs的第三方库，用于将图片保存到文件系统。你可以使用以下命令安装：

npm install @react-native-community/async-storage
npm install react-native-fs

接下来，创建一个名为ImageSaver.js的文件，并将以下代码添加到其中：

import React, { useEffect, useState } from 'react';
import { Image, AsyncStorage, RNFS } from 'react-native';
const ImageSaver = ({ source }) => {
const [saved, setSaved] = useState(false);
useEffect(() => {
const saveToGallery = async () => {
try {
const uri = source.uri;
const imagePath = `${uri.substring(0, uri.lastIndexOf('/') + 1)}my_image.jpg`;
const response = await fetch(uri);
const data = await response.blob();
await Image.saveToPhotosAlbum({ uri: imagePath, data });
setSaved(true);
} catch (error) {
console.error(error);
}
};
saveToGallery();
}, [source]);
return (
<Image source={source} style={{ width: 200, height: 200 }} />
);
};
export default ImageSaver;

这个组件接受一个source属性，该属性是一个包含图片URL的对象。当组件挂载时，它会尝试将图片保存到设备的相册。如果保存成功，saved状态将被设置为true。你可以根据需要在组件中添加额外的逻辑来处理保存成功或失败的情况。
使用时，你可以将该组件嵌套在其他组件中，并将图片的URL作为source属性传递给它。例如：

import React from 'react';
import { View, Image } from 'react-native';
import ImageSaver from './ImageSaver';
const App = () => {
return (
<View>
<ImageSaver source={{ uri: 'https://example.com/image.jpg' }} />
</View>
);
};