环境:react@18.2 react native@0.72
安装依赖
npm install react-native-fs --save
npm i @react-native-camera-roll/camera-roll
使用
import RNFS from 'react-native-fs';
import { CameraRoll } from "@react-native-camera-roll/camera-roll";
import Toast from 'react-native-toast-message';
//点击-保存海报
const downloadHandle = () => {
const imageUrl = 'https://www.xxx.com/images/P18-%E9%A2%84%E5%94%AE%E9%A1%B5%E9%9D%A2_1920.png'; // 图片的URL
const downloadDest = `${RNFS.DocumentDirectoryPath}/poster.png`; // 下载目标路径
try {
RNFS.downloadFile({
fromUrl: imageUrl,
toFile: downloadDest,
}).promise.then(response => {
console.log("[下载海报]", response, downloadDest)
saveToCameraRoll(downloadDest);
})
} catch (error) {
console.error('图片下载错误:', error);
Toast.show({
type: 'error',
text1: '图片下载错误',
topOffset: 300,
autoHide: true,
visibilityTime: 1500,
onHide: () => { },
});
}
}
// 保存图片到相册
const saveToCameraRoll = async (imageURI) => {
try {
await CameraRoll.save(imageURI, { type: 'photo', album: 'MyAlbum' });
console.log('Image saved to camera roll successfully');
Toast.show({
type: 'success',
text1: '图片保存成功',
topOffset: 300,
autoHide: true,
visibilityTime: 1500,
onHide: () => { },
});
} catch (error) {
console.error('Error saving image to camera roll:', error);
Toast.show({
type: 'error',
text1: '图片保存失败',
topOffset: 300,
autoHide: true,
visibilityTime: 1500,
onHide: () => { },
});
}
};