React Native中如何获取图片库选图结果及ImagePicker选图事件钩子

一、获取图片库选择结果 #

目前React Native生态中，常用的图片选择工具是react-native-image-picker（裸项目）或expo-image-picker（Expo项目），以下以react-native-image-picker为例说明核心用法：

1. 基础安装与配置 #

先安装依赖：

npm install react-native-image-picker
# 或 yarn add react-native-image-picker

• iOS：在Info.plist中添加相册访问权限声明

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册选择图片</string>

• Android：在AndroidManifest.xml中添加权限

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

2. 获取单张/多张图片结果 #

通过launchImageLibrary方法唤起相册，传入配置参数控制选图规则，通过Promise异步获取结果：

import { launchImageLibrary } from 'react-native-image-picker';

// 选择单张图片
const pickSingleImage = async () => {
  const result = await launchImageLibrary({
    mediaType: 'photo',
    selectionLimit: 1,
  });

  if (!result.didCancel && !result.errorCode) {
    // 成功获取图片元数据，包含uri、width、height等字段
    console.log('选中图片:', result.assets[0]);
  }
};

// 选择多张图片
const pickMultipleImages = async () => {
  const result = await launchImageLibrary({
    mediaType: 'photo',
    selectionLimit: 5, // 最多选5张
  });

  if (!result.didCancel && !result.errorCode) {
    // 遍历处理所有选中的图片
    result.assets.forEach(asset => {
      console.log('图片URI:', asset.uri);
    });
  }
};

Expo项目使用expo-image-picker的launchImageLibraryAsync方法，逻辑类似，仅返回结果的结构略有差异。

二、选图操作的「事件钩子」 #

ImagePicker模块本身没有专门命名为「event hook」的API，但可以通过选图完成后的异步结果回调实现等价逻辑——也就是在图片选择完成、拿到结果的瞬间，执行后续的转换和存储操作，这本质上就是选图操作的后置钩子。

三、将选中图片转为Uint8Array并存储 #

结合文件操作库react-native-fs可实现该需求，步骤如下：

1. 安装文件操作依赖 #

npm install react-native-fs
# 或 yarn add react-native-fs

2. 完整处理流程 #

import RNFS from 'react-native-fs';
import { launchImageLibrary } from 'react-native-image-picker';

const pickAndProcessImages = async () => {
  const result = await launchImageLibrary({
    mediaType: 'photo',
    selectionLimit: 3,
  });

  if (result.didCancel || result.errorCode) return;

  // 逐个处理选中的图片
  for (const asset of result.assets) {
    try {
      // 读取图片为base64格式
      const base64Data = await RNFS.readFile(asset.uri, 'base64');
      // 将base64转换为Uint8Array
      const uint8Array = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));
      
      // 定义存储路径（示例：文档目录下的processed文件夹）
      const saveDir = `${RNFS.DocumentDirectoryPath}/processed`;
      const savePath = `${saveDir}/${Date.now()}_${asset.fileName}`;
      
      // 确保存储目录存在
      await RNFS.mkdir(saveDir, { recursive: true });
      // 将Uint8Array写入文件
      await RNFS.writeFile(savePath, uint8Array, 'ascii');
      
      console.log('图片已存储至:', savePath);
    } catch (error) {
      console.error('图片处理失败:', error);
    }
  }
};

关键说明 #

• 用base64作为中间格式转换Uint8Array是最直接的实现方式；
• 存储路径可根据需求调整，Android外部存储需额外申请WRITE_EXTERNAL_STORAGE权限；
• 多图处理时用for...of配合await，避免并发操作导致的资源占用问题。

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