如何通过Expo Camera API将图片保存到React Native相册指定文件夹

嘿，这个需求我刚好实践过！用Expo实现专属相册保存图片，核心是用expo-media-library替代旧的CameraRoll（它已经被官方弃用啦），这个库能帮你轻松创建专属相册、管理媒体文件。下面一步步来实现：

1. 安装依赖并配置权限 #

首先安装expo-media-library：

npx expo install expo-media-library

然后需要请求媒体库的读写权限，在组件初始化时就申请：

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

// 类组件写法
componentDidMount = async () => {
  const { status } = await MediaLibrary.requestPermissionsAsync();
  if (status !== 'granted') {
    alert('需要授予媒体库权限才能保存图片到专属相册哦');
  }
};

// 函数组件可以用useEffect
// useEffect(() => {
//   const requestPermission = async () => {
//     const { status } = await MediaLibrary.requestPermissionsAsync();
//     if (status !== 'granted') {
//       alert('需要授予媒体库权限才能保存图片到专属相册哦');
//     }
//   };
//   requestPermission();
// }, []);

2. 编写“获取/创建专属相册”的工具函数 #

为了避免重复创建相册，我们先检查相册是否存在，不存在再创建：

getOrCreateAlbum = async (albumName) => {
  // 根据相册名查询已有相册
  const existingAlbums = await MediaLibrary.getAlbumsAsync({ title: albumName });
  if (existingAlbums.length > 0) {
    return existingAlbums[0];
  }
  // 不存在则创建新相册，第三个参数设为false表示不自动添加到最近项目
  return await MediaLibrary.createAlbumAsync(albumName, null, false);
};

3. 修改拍照保存逻辑 #

把你原来的takePicture函数替换成下面的版本，实现拍照后保存到专属相册：

takePicture = async () => {
  if (!this.camera) return;

  try {
    // 调用Camera API拍照，获取临时图片URI
    const photoData = await this.camera.takePictureAsync();
    // 获取或创建你的专属相册（这里替换成你的应用名或自定义文件夹名）
    const targetAlbum = await this.getOrCreateAlbum('MyAppPhotos');
    // 将临时图片转为媒体库资产
    const asset = await MediaLibrary.createAssetAsync(photoData.uri);
    // 把资产添加到专属相册
    await MediaLibrary.addAssetsToAlbumAsync([asset], targetAlbum, false);
    // 更新你的状态
    this.setState(prevState => ({ photoId: prevState.photoId + 1 }));
    alert('图片已成功保存到专属相册！');
  } catch (error) {
    console.error('保存图片失败:', error);
    alert('保存出错啦，请重试一下');
  }
};

一些注意事项 #

• 相册名称：建议用你的应用名称，用户在系统相册里能快速识别
• 平台差异：iOS会在“相簿”列表里显示你的专属相册，安卓则直接出现在相册主列表中
• 权限问题：一定要确保用户授予了媒体库权限，否则保存会失败
• 临时文件：takePictureAsync返回的URI是临时文件，必须通过createAssetAsync转为永久媒体资产才能添加到相册

内容的提问来源于stack exchange，提问作者Socratease