ReactNative中实现图片保存到手机相册
在 Expo 中,要将图片保存到手机相册,你可以使用 Expo 的 `MediaLibrary` 模块来实现。以下是保存图片到相册的基本步骤:
### 步骤概览:
1. **导入所需模块**:ImagePicker
import * as ImagePicker from 'expo-image-picker';
import * as MediaLibrary from 'expo-media-library';
2. **获取图片**:
使用 `ImagePicker` 模块从相册或摄像头中获取图片。
3. **保存图片到相册**:
使用 `MediaLibrary.saveToLibraryAsync()` 将获取到的图片保存到手机相册。
### 示例代码:
import React, { useState } from 'react';
import { View, Image, Button } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as MediaLibrary from 'expo-media-library';
export default function ImagePickerExample() {
const [pickedImage, setPickedImage] = useState(null);
const takeImageHandler = async () => {
try {
const result = await ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.cancelled) {
setPickedImage(result.uri);
await saveImage(result.uri);
}
} catch (error) {
console.error('获取图片失败:', error);
}
};
const saveImage = async (imageUri) => {
try {
await MediaLibrary.saveToLibraryAsync(imageUri);
alert('图片已保存到相册!');
} catch (error) {
console.error('保存图片到相册失败:', error);
alert('保存图片到相册失败,请重试!');
}
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="拍照并保存到相册" onPress={takeImageHandler} />
{pickedImage && <Image source={{ uri: pickedImage }} style={{ width: 200, height: 200, marginTop: 20 }} />}
</View>
);
}
以上代码,`ImagePicker.launchCameraAsync()` 用于启动相机并获取图片,然后使用 `saveImage()` 函数将获取到的图片保存到手机相册。