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

相关推荐
yuanyxh10 小时前
静默打印程序实现
前端·react.js·electron
前端老宋Running11 小时前
“受控组件”的诅咒:为什么你需要 React Hook Form + Zod 来拯救你的键盘?
前端·javascript·react.js
风止何安啊11 小时前
拿捏 React 组件通讯:从父子到跨组件的「传功秘籍」
前端·react.js·面试
韭菜炒大葱12 小时前
React 新手村通关指南:状态、组件与魔法 UI 🧙‍♂️
前端·javascript·react.js
是毛毛吧17 小时前
豆包风波后的破局者:智谱 AutoGLM 让“AI 手机”走向公共基建
人工智能·智能手机·开源·github·开源软件
用户120391129472619 小时前
从零掌握 React JSX:为什么它让前端开发像搭积木一样简单?
前端·react.js·面试
L、21819 小时前
Flutter + OpenHarmony + AI:打造智能本地大模型驱动的跨端应用(AI 时代新范式)
人工智能·flutter·华为·智能手机·harmonyos
limingade20 小时前
技术预研-app如何通过手机开发者选项-无线调试来使用adb-shell功能
adb·智能手机·手机无线调试adb·手机adb抓取屏幕画面·无线调试抓屏·无线调试与手机adb命令
飞鹰@四海21 小时前
AutoGLM 旧安卓一键变 AI 手机:安装与使用指南
android·人工智能·智能手机
言之。21 小时前
豆包手机AI Agent技术深度解析
人工智能·智能手机