ReactNative for OpenHarmony项目鸿蒙化三方库：react-native-image-picker — 图片选择器

number;quality?: number;: boolean;cameraType?type?: string;fileName?: string;fileSize?: number;base64?: string;

E绵绵

63人浏览 · 2026-03-17 21:55:53

E绵绵 · 2026-03-17 21:55:53 发布

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

📌 开发环境声明：本文基于 React Native 0.72.90 版本进行开发适配

🚀 一、开篇引言

在移动应用开发中，图片选择是最常见的功能之一。无论是用户头像上传、分享图片还是发送动态，都需要调用系统相册或相机来获取图片。react-native-image-picker 是 React Native 社区中最流行的图片选择器组件，提供了统一的 API 来访问设备相册和相机。本文将带你深入了解如何在 HarmonyOS 平台上集成和使用 react-native-image-picker，实现完整的图片选择功能。

1.1 你将学到什么？

✅ react-native-image-picker 的核心概念与工作原理
✅ HarmonyOS 平台的完整集成流程
✅ 多种实战场景的代码实现（相册选择、多图选择）
✅ 图片选择配置与回调处理
✅ 常见问题的解决方案

1.2 适用人群

正在进行 React Native 鸿蒙化迁移的开发者
需要实现图片选择功能的应用开发者
对跨平台媒体组件开发感兴趣的技术爱好者

📦 二、库概览

2.1 基本信息

项目	内容
库名称	react-native-image-picker
维护方	React Native Community
最新版本	7.0.3 (RN 0.72)
RN 0.72 适配包	@react-native-ohos/react-native-image-picker@7.0.4
RN 0.77 适配包	@react-native-ohos/react-native-image-picker@8.2.2
官方仓库	https://github.com/react-native-image-picker/react-native-image-picker
鸿蒙适配仓库	https://gitcode.com/openharmony-sig/rntpc_react-native-image-picker
开源协议	MIT

2.2 核心能力矩阵

能力项	描述	HarmonyOS 支持
相册选择	从系统相册选择图片	✅ 完全支持
相机拍照	调用系统相机拍摄照片	✅ 完全支持
多图选择	支持一次选择多张图片	✅ 完全支持
视频选择	支持选择视频文件	✅ 完全支持
Base64 编码	返回图片的 Base64 字符串	✅ 完全支持
图片压缩	指定图片质量和尺寸	❌ 暂不支持
视频录制	录制视频	⚠️ 部分支持
前后摄像头	切换前后摄像头	✅ 完全支持

2.3 技术架构图

⚡ 三、快速开始

3.1 环境要求

依赖项	版本要求
React Native	0.72.x
RNOH (鸿蒙框架)	0.72.90
HarmonyOS SDK	6.0.0.47+ (API 20)
DevEco Studio	5.0.3+ / 6.0+
Node.js	16.18.0+ / 18.x

3.2 版本说明

三方库版本	发布信息	支持RN版本
<= 7.0.3-0.1.8@deprecated	@react-native-oh-tpl/react-native-image-picker Releases(deprecated)	0.72
7.0.4	@react-native-ohos/react-native-image-picker Releases	0.72
8.2.2	@react-native-ohos/react-native-image-picker Releases	0.77

3.3 一键安装

创建鸿蒙项目的过程不在进行描述了，不懂得看这篇：https://blog.csdn.net/u011178696/article/details/151932277
在这里插入图片描述

# 安装鸿蒙适配包
npm install @react-native-ohos/react-native-image-picker@7.0.4-rc.1

3.4 验证安装

# 检查 package.json
type package.json | findstr image-picker

# 预期输出
# "@react-native-ohos/react-native-image-picker": "^7.0.4-rc.1"

🔧 四、HarmonyOS 集成详解

4.1 配置清单

📌 按顺序完成以下配置，缺一不可

步骤	配置文件	操作	重要程度
1	harmony/oh-package.json5	添加 overrides	⭐⭐⭐
2	harmony/entry/oh-package.json5	添加 har 依赖	⭐⭐⭐
3	harmony/entry/src/main/cpp/CMakeLists.txt	配置编译链接	⭐⭐⭐
4	harmony/entry/src/main/cpp/PackageProvider.cpp	引入头文件	⭐⭐⭐
5	harmony/entry/src/main/ets/RNPackagesFactory.ts	引入 Package	⭐⭐⭐

💡 注意：react-native-image-picker 7.0.4 版本支持 Autolink，如果项目已接入 Autolink 框架，可跳过手动配置步骤。

4.2 步骤详解（一定要根据自己的版本来）

步骤一：配置 overrides

在这里插入图片描述

// 文件：harmony/oh-package.json5
{
  "name": "MyApplication",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {},
  "overrides": {
    "@rnoh/react-native-openharmony": "0.72.90"
  }
}

步骤二：引入原生端代码

💡 提供两种引入方式，推荐使用 方法一（har 包引入）

方法一：通过 har 包引入（推荐）

📌 har 包位于三方库安装路径的 harmony 文件夹下

打开 harmony/entry/oh-package.json5，添加以下依赖：

{
  "name": "entry",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {
    "@rnoh/react-native-openharmony": "0.72.90",
    "@react-native-ohos/react-native-image-picker": "file:../../node_modules/@react-native-ohos/react-native-image-picker/harmony/image_picker.har"
  }
}

在这里插入图片描述

点击 DevEco Studio 右上角的 Sync Now 按钮，或在终端执行：

cd harmony/entry
ohpm install

方法二：直接链接源码

📌 目前 DevEco Studio 不支持通过源码引入外部 module，需要将源码通过操作改成 harmony 工程的内部模块

步骤 1：复制源码到 harmony 工程根目录

将 <RN工程>/node_modules/@react-native-ohos/react-native-image-picker/harmony/ 目录下的源码 image_picker 复制到 harmony 工程根目录下：

harmony/
├── entry/
├── image_picker/        ← 复制过来的源码目录
└── build-profile.json5

步骤 2：在 build-profile.json5 添加模块配置

打开 harmony/build-profile.json5，添加以下模块：

{
  "app": {
    "signingConfigs": [],
    "products": [],
    "buildModeSet": []
  },
  "modules": [
    {
      "name": "entry",
      "srcPath": "./entry",
      "targets": []
    },
    {
      "name": "image_picker",
      "srcPath": "./image_picker"
    }
  ]
}

💡 如果存在 build-profile.template.json5 文件，也需要同步添加上述 modules 配置。

步骤 3：修改源码中的依赖版本

打开 harmony/image_picker/oh-package.json5，修改 @rnoh/react-native-openharmony 版本与项目一致：

{
  "name": "image_picker",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {
    "@rnoh/react-native-openharmony": "0.72.90"
  }
}

步骤 4：在 entry/oh-package.json5 添加依赖

打开 harmony/entry/oh-package.json5，添加以下依赖：

{
  "name": "entry",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {
    "@rnoh/react-native-openharmony": "0.72.90",
    "@react-native-ohos/react-native-image-picker": "file:../image_picker"
  }
}

步骤 5：同步项目

点击 DevEco Studio 右上角的 Sync Now 按钮，或在终端执行：

cd harmony/entry
ohpm install

步骤三：配置 CMake 编译（只需要补充带+号的部分）

# 文件：harmony/entry/src/main/cpp/CMakeLists.txt

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1)
add_compile_definitions(WITH_HITRACE_SYSTRACE)

add_subdirectory("${RNOH_CPP_DIR}" ./rn)

# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-image-picker/src/main/cpp" ./image_picker)
# RNOH_END: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

add_library(rnoh_app SHARED
    ${GENERATED_CPP_FILES}
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_image_picker)
# RNOH_END: manual_package_linking_2

步骤四：引入 Package（C++ 层）

// 文件：harmony/entry/src/main/cpp/PackageProvider.cpp

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
#include "SamplePackage.h"
+ #include "RNImagePickerPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<RNOHGeneratedPackage>(ctx),
        std::make_shared<SamplePackage>(ctx),
        std::make_shared<RNImagePickerPackage>(ctx),
    };
}

步骤五：引入 Package（ArkTS 层）

// 文件：harmony/entry/src/main/ets/RNPackagesFactory.ts

import { ImagePickerViewPackage } from '@react-native-ohos/react-native-image-picker/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
    new ImagePickerViewPackage(ctx)
  ];
}

4.3 同步与编译

# 进入 entry 目录
cd harmony/entry

# 执行依赖同步
ohpm install

# 返回项目根目录
cd ../..

在 DevEco Studio 中点击右上角的 Sync Now 按钮，等待同步完成后编译运行。

4.4 添加 harmony 运行环境

在项目中的 package.json 中添加运行命令，harmony 运行使用 npm run harmony 命令

"scripts": {
  "android": "react-native run-android",
  "ios": "react-native run-ios",
  "lint": "eslint .",
  "start": "react-native start",
  "test": "jest",
  "harmony": "react-native bundle-harmony --dev"
},

💻 五、实战演练

在这里插入图片描述

场景一：基础相册选择

需求描述：实现一个基础的相册选择功能，选择单张图片并显示。

实现代码：

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  Alert,
} from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';

interface ImageAsset {
  uri: string;
  width: number;
  height: number;
  type?: string;
  fileName?: string;
  fileSize?: number;
}

export default function ImagePickerBasic() {
  const [selectedImage, setSelectedImage] = useState<ImageAsset | null>(null);

  const handleSelectImage = async () => {
    const result = await launchImageLibrary({
      mediaType: 'photo',
      selectionLimit: 1,
      quality: 1,
    });

    if (result.didCancel) {
      console.log('用户取消了选择');
      return;
    }

    if (result.errorCode) {
      Alert.alert('错误', result.errorMessage || '选择图片失败');
      return;
    }

    if (result.assets && result.assets.length > 0) {
      const asset = result.assets[0];
      setSelectedImage({
        uri: asset.uri || '',
        width: asset.width || 0,
        height: asset.height || 0,
        type: asset.type,
        fileName: asset.fileName,
        fileSize: asset.fileSize,
      });
    }
  };

  const handleClear = () => {
    setSelectedImage(null);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>基础相册选择</Text>

      {selectedImage ? (
        <View style={styles.previewContainer}>
          <Image
            source={{ uri: selectedImage.uri }}
            style={styles.previewImage}
            resizeMode="contain"
          />
          <View style={styles.infoContainer}>
            <Text style={styles.infoText}>
              文件名: {selectedImage.fileName}
            </Text>
            <Text style={styles.infoText}>
              尺寸: {selectedImage.width} x {selectedImage.height}
            </Text>
            {selectedImage.fileSize && (
              <Text style={styles.infoText}>
                大小: {(selectedImage.fileSize / 1024).toFixed(2)} KB
              </Text>
            )}
          </View>
          <TouchableOpacity style={styles.clearButton} onPress={handleClear}>
            <Text style={styles.clearButtonText}>清除图片</Text>
          </TouchableOpacity>
        </View>
      ) : (
        <TouchableOpacity style={styles.selectButton} onPress={handleSelectImage}>
          <Text style={styles.selectButtonText}>选择图片</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  selectButton: {
    backgroundColor: '#4c669f',
    paddingVertical: 14,
    paddingHorizontal: 32,
    borderRadius: 8,
    marginTop: 20,
  },
  selectButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#FFFFFF',
  },
  previewContainer: {
    alignItems: 'center',
    width: '100%',
  },
  previewImage: {
    width: 300,
    height: 300,
    borderRadius: 12,
    backgroundColor: '#f0f0f0',
  },
  infoContainer: {
    marginTop: 16,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    width: '100%',
  },
  infoText: {
    fontSize: 14,
    color: '#666',
    marginBottom: 4,
  },
  clearButton: {
    backgroundColor: '#e74c3c',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    marginTop: 16,
  },
  clearButtonText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#FFFFFF',
  },
});

场景二：多图选择

在这里插入图片描述

需求描述：实现多图选择功能，支持选择最多 9 张图片并展示。

实现代码：

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  FlatList,
  Alert,
} from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';

interface ImageItem {
  id: string;
  uri: string;
  width: number;
  height: number;
}

interface MultiImagePickerProps {
  maxImages?: number;
  onImagesSelected?: (images: ImageItem[]) => void;
}

export default function MultiImagePicker({
  maxImages = 9,
  onImagesSelected,
}: MultiImagePickerProps) {
  const [images, setImages] = useState<ImageItem[]>([]);

  const handleSelectImages = async () => {
    const remainingSlots = maxImages - images.length;
  
    if (remainingSlots <= 0) {
      Alert.alert('提示', `最多只能选择 ${maxImages} 张图片`);
      return;
    }

    const result = await launchImageLibrary({
      mediaType: 'photo',
      selectionLimit: remainingSlots,
      quality: 1,
    });

    if (result.didCancel) {
      return;
    }

    if (result.errorCode) {
      Alert.alert('错误', result.errorMessage || '选择图片失败');
      return;
    }

    if (result.assets && result.assets.length > 0) {
      const newImages = result.assets.map((asset, index) => ({
        id: `${Date.now()}-${index}`,
        uri: asset.uri || '',
        width: asset.width || 0,
        height: asset.height || 0,
      }));

      const updatedImages = [...images, ...newImages];
      setImages(updatedImages);
      onImagesSelected?.(updatedImages);
    }
  };

  const handleRemoveImage = (id: string) => {
    const updatedImages = images.filter((img) => img.id !== id);
    setImages(updatedImages);
    onImagesSelected?.(updatedImages);
  };

  const handleClearAll = () => {
    setImages([]);
    onImagesSelected?.([]);
  };

  const renderImageItem = ({ item }: { item: ImageItem }) => (
    <View style={styles.imageItem}>
      <Image source={{ uri: item.uri }} style={styles.thumbnail} />
      <TouchableOpacity
        style={styles.removeButton}
        onPress={() => handleRemoveImage(item.id)}
      >
        <Text style={styles.removeButtonText}>×</Text>
      </TouchableOpacity>
    </View>
  );

  const renderAddButton = () => {
    if (images.length >= maxImages) return null;
  
    return (
      <TouchableOpacity style={styles.addButton} onPress={handleSelectImages}>
        <Text style={styles.addButtonIcon}>+</Text>
        <Text style={styles.addButtonText}>添加图片</Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>多图选择</Text>
        <Text style={styles.count}>
          {images.length} / {maxImages}
        </Text>
      </View>

      <FlatList
        data={images}
        renderItem={renderImageItem}
        keyExtractor={(item) => item.id}
        numColumns={3}
        scrollEnabled={false}
        ListFooterComponent={renderAddButton}
        contentContainerStyle={styles.imageGrid}
      />

      {images.length > 0 && (
        <TouchableOpacity style={styles.clearAllButton} onPress={handleClearAll}>
          <Text style={styles.clearAllButtonText}>清空全部</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  count: {
    fontSize: 14,
    color: '#666',
  },
  imageGrid: {
    gap: 8,
  },
  imageItem: {
    width: 100,
    height: 100,
    margin: 4,
    position: 'relative',
  },
  thumbnail: {
    width: '100%',
    height: '100%',
    borderRadius: 8,
    backgroundColor: '#f0f0f0',
  },
  removeButton: {
    position: 'absolute',
    top: -6,
    right: -6,
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: '#e74c3c',
    justifyContent: 'center',
    alignItems: 'center',
  },
  removeButtonText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#FFFFFF',
    marginTop: -2,
  },
  addButton: {
    width: 100,
    height: 100,
    margin: 4,
    borderRadius: 8,
    borderWidth: 2,
    borderColor: '#ddd',
    borderStyle: 'dashed',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f9f9f9',
  },
  addButtonIcon: {
    fontSize: 32,
    color: '#999',
    marginBottom: 4,
  },
  addButtonText: {
    fontSize: 12,
    color: '#999',
  },
  clearAllButton: {
    backgroundColor: '#e74c3c',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 16,
  },
  clearAllButtonText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#FFFFFF',
  },
});

📋 六、API 详解

6.1 Options 配置项

属性名	描述	类型	必填	HarmonyOS 支持
mediaType	媒体类型：‘photo’ / ‘video’ / ‘mixed’	string	否	✅
maxWidth	图片最大宽度（像素）	number	否	❌
maxHeight	图片最大高度（像素）	number	否	❌
videoQuality	视频质量：‘low’ / ‘medium’ / ‘high’	string	否	❌
durationLimit	视频最大时长（秒）	number	否	❌
quality	图片质量：0-1	number	否	❌
cameraType	相机类型：‘back’ / ‘front’	string	否	✅
includeBase64	是否返回 Base64 编码	boolean	否	✅
includeExtra	是否包含额外信息（如 EXIF）	boolean	否	❌
saveToPhotos	是否保存到相册（仅相机模式）	boolean	否	❌
selectionLimit	选择数量限制，0 表示不限制（HarmonyOS 最多 50 张）	number	否	✅

6.2 Response 响应对象

属性名	描述	类型
didCancel	用户是否取消	boolean
errorCode	错误代码	string
errorMessage	错误信息	string
assets	选中的媒体资源数组	Asset[]

6.3 Asset 对象

属性名	描述	类型	HarmonyOS 支持
base64	图片的 Base64 编码	string	✅
uri	文件 URI	string	✅
originalPath	原始文件路径	string	✅
width	图片宽度	number	✅
height	图片高度	number	✅
fileSize	文件大小（字节）	number	✅
type	文件 MIME 类型	string	✅
fileName	文件名	string	✅
duration	视频时长（秒）	number	❌
id	本地标识符	string	✅

6.4 静态方法（官方文档中显示还不支持）

方法名	描述	参数	HarmonyOS 支持
launchCamera	启动相机拍照/录像	options, callback	❌
launchImageLibrary	启动相册选择	options, callback	✅

⚠️ 七、常见问题与解决方案

7.1 选择器无法打开

问题描述：点击按钮后选择器没有弹出。

可能原因与解决方案：

权限未配置

HarmonyOS 需要在 module.json5 中配置相应权限：

{
  "requestPermissions": [
    {
      "name": "ohos.permission.READ_MEDIA",
      "reason": "用于读取相册图片"
    },
    {
      "name": "ohos.permission.CAMERA",
      "reason": "用于拍摄照片"
    }
  ]
}

Package 未正确引入
- 检查 PackageProvider.cpp 和 RNPackagesFactory.ts 是否正确引入

7.2 图片显示异常

问题描述：选择图片后无法正常显示。

解决方案：

// 确保正确处理 URI
const result = await launchImageLibrary({ mediaType: 'photo' });

if (result.assets && result.assets.length > 0) {
  const asset = result.assets[0];
  
  // 使用 uri 而不是 originalPath
  const imageUri = asset.uri;
  
  // 如果需要 Base64
  const base64Data = asset.base64;
}

7.3 多图选择数量限制

问题描述：selectionLimit 设置后不生效。

解决方案：

// HarmonyOS 的 selectionLimit 说明
// selectionLimit: 0 表示不限制（最多 50 张）
// selectionLimit: 1 表示单选
// selectionLimit: n 表示最多选择 n 张

const result = await launchImageLibrary({
  mediaType: 'photo',
  selectionLimit: 9, // 最多选择 9 张
});

7.4 HarmonyOS 特有限制

限制项	说明
图片压缩	maxWidth/maxHeight/quality 参数暂不支持
视频录制	部分设备可能不支持
保存到相册	saveToPhotos 参数暂不支持
额外信息	includeExtra 参数暂不支持

📊 八、最佳实践

8.1错误处理封装

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

type PickerResult = {
  success: boolean;
  uri?: string;
  error?: string;
};

export const pickImage = async (useCamera = false): Promise<PickerResult> => {
  try {
    const options = {
      mediaType: 'photo' as const,
      quality: 1,
      selectionLimit: 1,
    };

    const result: ImagePickerResponse = useCamera
      ? await launchCamera(options)
      : await launchImageLibrary(options);

    if (result.didCancel) {
      return { success: false, error: '用户取消' };
    }

    if (result.errorCode) {
      return { success: false, error: result.errorMessage || '未知错误' };
    }

    if (result.assets && result.assets.length > 0) {
      return { success: true, uri: result.assets[0].uri };
    }

    return { success: false, error: '未获取到图片' };
  } catch (error) {
    return { success: false, error: '选择图片时发生错误' };
  }
};

8.2 TypeScript 类型定义

import {
  ImagePickerResponse,
  ImageLibraryOptions,
  CameraOptions,
  Asset,
} from 'react-native-image-picker';

interface CustomPickerOptions {
  mediaType?: 'photo' | 'video' | 'mixed';
  selectionLimit?: number;
  quality?: number;
  includeBase64?: boolean;
  cameraType?: 'back' | 'front';
}

interface PickerAsset extends Asset {
  uri: string;
  width: number;
  height: number;
  type?: string;
  fileName?: string;
  fileSize?: number;
  base64?: string;
}

🔗 九、参考资料

人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

Flutter 三方库 tapper 的鸿蒙化适配指南 - 单元测试的“闪电侠”、在鸿蒙端实现极简函数式测试实战

在进行 Flutter for OpenHarmony 的高质量开发过程中，单元测试是保障逻辑稳健性的最后一道防线。然而，繁琐的测试样板代码往往让开发者望而生畏。tapper库提供了一套高度流式、极简的函数式测试语法。本文将带你在鸿蒙端侧构建一套“写起来爽且跑起来快”的高效测试体系。tapper的核心是对 standard Dart 单元测试（test package）的一种语法增强。它通过链式调