当前位置: 首页 > article >正文

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


http://www.kler.cn/a/386587.html

相关文章:

  • 给阿里云OSS绑定域名并启用SSL
  • 大模型研究报告 | 2024年中国金融大模型产业发展洞察报告|附34页PDF文件下载
  • 3588 yolov8 onnx 量化转 rknn 并运行
  • nVisual自定义工单内容
  • Python的Matplotlib
  • 企业一站式管理系统odoo的研究——PLM插件的搭建
  • 3.PyCharm工具
  • virtualBox部署minikube+istio
  • Java项目实战II基于Java+Spring Boot+MySQL的高校办公室行政事务管理系统(源码+数据库+文档)
  • 速盾:vue的cdn是干嘛的?
  • Rust-AOP编程实战
  • vue2 -- el-form组件动态增减表单项及表单项验证
  • 关于我重生到21世纪学C语言这件事——三子棋游戏!
  • Java打造智能语音陪聊软件?提升用户体验的新路径
  • 【数据集】【YOLO】【目标检测】树木倒塌识别数据集 9957 张,YOLO道路树木断裂识别算法实战训练教程!
  • 让AI帮我用java实现EasyExel读取图片—支持WPS嵌入图片
  • python externally-managed-environment 外部管理环境
  • Kotlin 协程使用及其详解
  • 【go从零单排】结构嵌套struct embedding
  • C# 独立线程
  • 【Qwen2技术报告分析】解读模型架构 pre/post数据构建和模型评估
  • [Android] Graphic Buffer 的申请
  • C++:线程(thread)的创建、调用及销毁
  • Halcon resistor.hedv 使用多个对焦级别提取深度
  • .NET 黑名单上传 突破WAF防护的SoapShell (免杀版)
  • MySQL数据库专栏(五)连接MySQL数据库C API篇