ReactNative中实现图片保存到手机相册

在 Expo 中,要将图片保存到手机相册,你可以使用 Expo 的 `MediaLibrary` 模块来实现。以下是保存图片到相册的基本步骤:

步骤概览:

  1. **导入所需模块**:ImagePicker

import * as ImagePicker from 'expo-image-picker';

import * as MediaLibrary from 'expo-media-library';

  1. **获取图片**:

使用 `ImagePicker` 模块从相册或摄像头中获取图片。

  1. **保存图片到相册**:

使用 `MediaLibrary.saveToLibraryAsync()` 将获取到的图片保存到手机相册。

示例代码:

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

相关推荐
500842 小时前
React Native for OpenHarmony 实战:三方库 react-native-volume-control 的鸿蒙化适配指南
javascript·react native·react.js·electron·harmonyos
薛一半2 小时前
React-Redux三重优化实战揭秘
javascript·vue.js·react.js
DP DPharness1 天前
手机连不上 DSH 时的排错顺序:从 401 到 WebSocket 放行
websocket·网络协议·智能手机
开开心心就好1 天前
以图搜图找重复图片,本地工具离线就能用
javascript·智能手机·ffmpeg·c#·ocr·word·音视频
开开心心就好2 天前
办公软件卸载不干净?专用工具一键清残留
java·前端·人工智能·智能手机·kafka·excel·memcache
薛一半2 天前
React-Redux核心原理与容器组件实战
前端·javascript·react.js
FungLeo2 天前
成为全栈·Next.js 网站前台篇·评论系统:叠楼、回复、删除与内容审核如何落到前台
react.js·内容审核·next.js·评论系统·树形数据·成为全栈
开开心心就好2 天前
二维码批量生成导出工具,离线可用完全免费
java·前端·人工智能·智能手机·github·excel·visual studio
Alice-YUE2 天前
React 渲染机制速通:Render 树、Fiber 树与更新调度
前端·react.js·前端框架·react·fiber·前端性能·渲染机制
so~what3 天前
【 TA】手机在看基站的影子,基站在算手机的未来:深度拆解 LTE/5G TA
5g·智能手机