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()` 函数将获取到的图片保存到手机相册。

原文地址：https://blog.csdn.net/m0_61343119/article/details/143501102

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！