文档模板：v0.4.2

react-native-image-picker

本项目基于 react-native-image-picker 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-image-picker 版本所属关系如下：

简介

react-native-image-picker是一个可让你从设备图库或相机中选择照片/视频的库。

下载安装

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-image-picker

yarn

yarn add @react-native-ohos/react-native-image-picker

Link

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

{
  "overrides": {
    "@rnoh/react-native-openharmony": "^0.82.25" // ohpm 在线版本
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
  }
}

"dependencies": {
  "@react-native-ohos/react-native-image-picker": "file:../../node_modules/@react-native-ohos/react-native-image-picker/harmony/image_picker.har"
}

cd entry
ohpm install

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) # for other CMakeLists.txt files to use
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

#include "RNOH/PackageProvider.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<SamplePackage>(ctx),
+     std::make_shared<RNImagePickerPackage>(ctx),
    };
}

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

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

运行

点击右上角的 sync 按钮

或者在命令行终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

本文档内容基于以下版本验证通过：

1. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
2. RNOH: 0.82.25; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.120 SP7;
3. RNOH: 0.84.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.120 SP7;

权限要求

在 entry 目录下的 module.json5 中添加权限

"requestPermissions": [
+  {
+    "name": "ohos.permission.CAMERA",  // 相机权限名称
+    "reason": "$string:camera_reason",
+    "usedScene": {
+      "abilities": [
+        "EntryAbility"
+      ],
+      "when":"inuse"
+    }
+  },
+  {
+    "name": "ohos.permission.MICROPHONE", // 麦克风权限名称
+    "reason": "$string:mic_reason",
+    "usedScene": {
+      "abilities": [
+        "EntryAbility"
+      ],
+      "when":"inuse"
+    }
+  },
]

在 entry 目录下添加申请以上权限的原因 打开 entry/src/main/resources/base/element/string.json，添加：

{
  "string": [
+    {
+      "name": "microphone_reason",
+      "value": "使用麦克风"
+    },
+    {
+      "name": "camera_reason",
+      "value": "使用相机"
+    },
  ]
}

使用示例

下面的代码展示了这个库的基本使用场景：

import React from 'react';
import { View, Text } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';

const App = () => {
  const [urlInfo, setUrlInfo] = React.useState<string>();
  return (
    <View style={{ flex: 1, marginTop: 100 }}>
      <View style={{
        width: 160,
        height: 36,
        backgroundColor: 'hsl(190,50%,70%)',
        paddingHorizontal: 16,
        paddingVertical: 8,
        borderRadius: 8
      }} onTouchEnd={() => {
        launchImageLibrary({ mediaType: 'photo', selectionLimit: 1 }, (data) => {
          if (data.assets?.length) {
            setUrlInfo(JSON.stringify(data.assets))
          }
        })
      }}>
        <Text style={{ width: '100%', height: '100%', fontWeight: 'bold', textAlign: 'center' }}>选择图片</Text>
      </View>
      <Text>{urlInfo}</Text>
    </View>
  );
};

export default App;

使用说明

launchImageLibrary（启动相册选择图片或视频）

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

launchImageLibrary({
    mediaType: 'photo',          // 'photo' | 'video' | 'mixed'
    selectionLimit: 1,           // 可选数量，0 
    quality: 1,                  // 压缩质量 0~1，1 为不压缩
    includeBase64: false,        // 是否包含 base64 字符串
    restrictMimeTypes: ['image/jpeg', 'image/png'],  // 限制可选 MIME 类型
    maxWidth: 800,            // 调整图片宽度
    maxHeight: 600,           // 调整图片高度
    durationLimit: 60,        // 视频最大录制时长，秒
    includeExtra: true,       // 是否包含 exif 等额外数据
}, (data) => {
    if (data.didCancel) {
        console.log('用户取消选择');
        return;
    }
    if (data.errorCode) {
        console.log('错误:', data.errorCode, data.errorMessage);
        return;
    }
    data.assets?.forEach((asset) => {
        console.log('uri:', asset.uri);
        console.log('fileName:', asset.fileName);
        console.log('fileSize:', asset.fileSize);
        console.log('width:', asset.width, 'height:', asset.height);
        console.log('type:', asset.type);
    });
});

launchCamera（启动相机拍摄照片或视频）

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

launchCamera({
    mediaType: 'photo',          // 'photo' | 'video'
    cameraType: 'back',          // 'back' | 'front'
    quality: 1,                  // 压缩质量 0~1
    includeBase64: false,        // 是否包含 base64 字符串
    maxWidth: 800,            // 调整图片宽度
    maxHeight: 600,           // 调整图片高度
    durationLimit: 60,        // 视频最大录制时长，秒
    includeExtra: true,       // 是否包含 exif 等额外数据
}, (data) => {
    if (data.didCancel) {
        console.log('用户取消拍摄');
        return;
    }
    if (data.errorCode) {
        console.log('错误:', data.errorCode, data.errorMessage);
        return;
    }
    if (data.assets?.length) {
        console.log('uri:', data.assets[0].uri);
        console.log('fileName:', data.assets[0].fileName);
        console.log('fileSize:', data.assets[0].fileSize);
        console.log('width:', data.assets[0].width, 'height:', data.assets[0].height);
    }
});

接口说明

API

属性

Options

The Response Object

Asset Object

遗留问题

• image-picker部分属性未实现 HarmonyOS 化: issue#14

其他

目录结构

/rntpc_react-native-image-picker  # 项目根目录
├── harmony                          # 鸿蒙适配代码
│   ├── image_picker.har             # har 包
│   └── image_picker/                # 鸿蒙适配核心代码
│       └── src/
│           └── main/
│               ├── cpp/                         # C++ 原生模块
│               │   ├── CMakeLists.txt
│               │   ├── RNImagePickerPackage.h
│               │   ├── RNImagePickerTurboModule.cpp
│               │   └── RNImagePickerTurboModule.h
│               ├── ets/                         # ArkTS 核心实现代码
│               │   ├── ImagePickerPackage.ets
│               │   ├── ImagePickerTurboModule.ts
│               │   └── Logger.ts

├── src                               # RN 代码
│   └─ index.ts                      # 入口文件
│   └─ types.ts                # 类型文件
├── README.md                         # 中文安装使用方法
├── README_en.md                      # 英文安装使用方法                 

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。