# ty-react-native-image-picker **Repository Path**: rn-mi/ty-react-native-image-picker ## Basic Information - **Project Name**: ty-react-native-image-picker - **Description**: TY项目react-native-image-picker仓库 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-04-07 - **Last Updated**: 2025-08-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README > 模板版本：v0.3.0

`react-native-image-picker`

本项目基于 [react-native-image-picker@1.1.0](https://github.com/react-native-image-picker/react-native-image-picker) 开发。 ## 安装与使用进入到工程目录并输入以下命令： #### **npm** ```bash npm install @tuya-oh/react-native-image-picker ``` #### **yarn** ```bash yarn add @tuya-oh/react-native-image-picker ``` 下面的代码展示了这个库的基本使用场景： > [!WARNING] 使用时 import 的库名不变。 ```js import React from 'react'; import { View, Text } from 'react-native'; import ImagePicker from 'react-native-image-picker'; const App = () => { const [urlInfo, setUrlInfo] = React.useState(); return ( { ImagePicker.launchImageLibrary({ mediaType: 'photo', selectionLimit: 1 }, (data) => { if (data.assets?.length) { setUrlInfo(JSON.stringify(data.assets)) } }) }}> 选择 {urlInfo} ); }; export default App; ``` ## Link 目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` ### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 ```json { ... "overrides": { "@rnoh/react-native-openharmony" : "./react_native_openharmony" } } ``` ### 2.引入原生端代码目前有两种方法： 1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； 2. 直接链接源码。方法一：通过 har 包引入 > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", "@tuya-oh/react-native-image-picker": "file:../../node_modules/@tuya-oh/react-native-image-picker/harmony/image_picker.har" } ``` 点击右上角的 `sync` 按钮或者在终端执行： ```bash cd entry ohpm install ``` 方法二：直接链接源码 > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/link-source-code.md) ### 3.在 ArkTs 侧引入 RNImagePickerPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... + import { RNImagePickerPackage } from '@tuya-oh/react-native-image-picker/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), + new RNImagePickerPackage(ctx) ]; } ``` ### 4.配置 CMakeLists 和引入 RNImagePickerPackage 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff + set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") # RNOH_BEGIN: manual_package_linking_1 + add_subdirectory("${OH_MODULES}/@tuya-oh/react-native-image-picker/src/main/cpp" ./image_picker) # RNOH_END: manual_package_linking_1 # RNOH_BEGIN: manual_package_linking_2 + target_link_libraries(rnoh_app PUBLIC rn_image_picker) # RNOH_END: manual_package_linking_2 ``` 打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： ```diff #include "RNOH/PackageProvider.h" #include "generated/RNOHGeneratedPackage.h" + #include "RNImagePickerPackage.h" using namespace rnoh; std::vector> PackageProvider::getPackages(Package::Context ctx) { return { std::make_shared(ctx), + std::make_shared(ctx), }; } ``` ### 5.添加相机权限打开 `entry/src/main/module.json5`，添加： ```json { "module": { ... "requestPermissions": [ ... { "name": "ohos.permission.CAMERA", "reason": "$string:CAMERA", "usedScene": { "abilities": [ "EntryAbility" ], "when": "always" } }, ] } } ``` ### 6.运行点击右上角的 `sync` 按钮或者在终端执行： ```bash cd entry ohpm install ``` 然后编译、运行即可。 ### 7.release包的使用 > 执行完'npm install @tuya-oh/react-native-image-picker@x.x.x'命令后，在生成的node_modules/npm install @tuya-oh/react-native-image-picker中即可获取release包。打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(CMAKE_SKIP_BUILD_RPATH TRUE) set(NATIVERENDER_ROOT_PATH "${CMAKE_CURRENT_SOURCE_DIR}") set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") set(RNOH_CPP_DIR "${OH_MODULE_DIR}/@rnoh/react-native-openharmony/include") set(REACT_COMMON_PATCH_DIR "${RNOH_CPP_DIR}/patches/react_native_core") set(CMAKE_CXX_STANDARD 17) set(LOG_VERBOSITY_LEVEL 1) set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated") set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie -DNDEBUG") set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use add_compile_definitions(WITH_HITRACE_SYSTRACE) # folly的编译选项 set(folly_compile_options -DFOLLY_NO_CONFIG=1 -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_HAVE_RECVMMSG=1 -DFOLLY_HAVE_PTHREAD=1 -Wno-comma -Wno-shorten-64-to-32 -Wno-documentation -faligned-new ) add_compile_options("-Wno-unused-command-line-argument") # 添加头文件目录 include_directories(${NATIVERENDER_ROOT_PATH} ${RNOH_CPP_DIR} ${REACT_COMMON_PATCH_DIR} ${RNOH_CPP_DIR}/third-party/folly ${RNOH_CPP_DIR}/third-party/rn/ReactCommon ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/react/nativemodule/core ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/jsi ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/callinvoker ${RNOH_CPP_DIR}/third-party/boost/libs/utility/include ${RNOH_CPP_DIR}/third-party/boost/libs/stacktrace/include ${RNOH_CPP_DIR}/third-party/boost/libs/predef/include ${RNOH_CPP_DIR}/third-party/boost/libs/array/include ${RNOH_CPP_DIR}/third-party/boost/libs/throw_exception/include ${RNOH_CPP_DIR}/third-party/boost/libs/config/include ${RNOH_CPP_DIR}/third-party/boost/libs/core/include ${RNOH_CPP_DIR}/third-party/boost/libs/preprocessor/include ${RNOH_CPP_DIR}/third-party/double-conversion ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/react/renderer/graphics/platform/cxx ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/runtimeexecutor ${RNOH_CPP_DIR}/third-party/glog/src ${RNOH_CPP_DIR}/third-party/boost/libs/mpl/include ${RNOH_CPP_DIR}/third-party/boost/libs/type_traits/include ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/yoga ${RNOH_CPP_DIR}/third-party/boost/libs/intrusive/include ${RNOH_CPP_DIR}/third-party/boost/libs/assert/include ${RNOH_CPP_DIR}/third-party/boost/libs/move/include ${RNOH_CPP_DIR}/third-party/boost/libs/static_assert/include ${RNOH_CPP_DIR}/third-party/boost/libs/container_hash/include ${RNOH_CPP_DIR}/third-party/boost/libs/describe/include ${RNOH_CPP_DIR}/third-party/boost/libs/mp11/include ${RNOH_CPP_DIR}/third-party/boost/libs/iterator/include ${RNOH_CPP_DIR}/third-party/boost/libs/detail/include ${RNOH_CPP_DIR}/patches/react_native_core/react/renderer/textlayoutmanager/platform/harmony + ${OH_MODULE_DIR}/@tuya-oh/react-native-image-picker/include ) configure_file( ${RNOH_CPP_DIR}/third-party/folly/CMake/folly-config.h.cmake ${RNOH_CPP_DIR}/third-party/folly/folly/folly-config.h ) file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") # 添加rnoh动态共享包 add_library(rnoh SHARED "${RNOH_CPP_DIR}/RNOHOther.cpp" "${RNOH_CPP_DIR}/third-party/folly/folly/lang/SafeAssert.cpp" ) # 链接其他so target_link_directories(rnoh PUBLIC ${OH_MODULE_DIR}/@rnoh/react-native-openharmony/libs/arm64-v8a) + target_link_directories(rnoh PUBLIC ${OH_MODULE_DIR}/@tuya-oh/react-native-image-picker/libs/arm64-v8a) target_link_libraries(rnoh PUBLIC rnoh_semi libace_napi.z.so libace_ndk.z.so librawfile.z.so libhilog_ndk.z.so libnative_vsync.so libnative_drawing.so libc++_shared.so libhitrace_ndk.z.so react_render_scheduler rrc_image rrc_text rrc_textinput rrc_scrollview react_nativemodule_core react_render_animations jsinspector hermes jsi logger react_config react_debug react_render_attributedstring react_render_componentregistry react_render_core react_render_debug react_render_graphics react_render_imagemanager react_render_mapbuffer react_render_mounting react_render_templateprocessor react_render_textlayoutmanager react_render_telemetry react_render_uimanager react_utils rrc_root rrc_view react_render_leakchecker react_render_runtimescheduler runtimeexecutor + rn_image_picker ) if("$ENV{RNOH_C_API_ARCH}" STREQUAL "1") message("Experimental C-API architecture enabled") target_link_libraries(rnoh PUBLIC libqos.so) target_compile_definitions(rnoh PUBLIC C_API_ARCH) endif() # 添加rnoh_app共享包 add_library(rnoh_app SHARED ${GENERATED_CPP_FILES} "./PackageProvider.cpp" "${RNOH_CPP_DIR}/RNOHOther.cpp" "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" ) + target_include_directories(rnoh_app PUBLIC + "${OH_MODULE_DIR}/@tuya-oh/react-native-image-picker/include" + "${OH_MODULE_DIR}/@tuya-oh/react-native-image-picker/include/generated" + "${OH_MODULE_DIR}/@tuya-oh/react-native-image-picker/include/generated/react" + ) target_link_libraries(rnoh_app PUBLIC rnoh) # RNOH_END: link_packages target_compile_options(rnoh_app PUBLIC ${folly_compile_options} -DRAW_PROPS_ENABLED -std=c++17) ``` ### 8.字节码格式的release包使用字节码格式的release包是指在release模式下编译出来、ets文件转换成了.abc、C++源码转换成.so的har包，其命名格式为 react_native_openharmony_abc-x.x.x.xxx.har。字节码格式的release包使用方式跟release包使用大体上是一样的，主要有两点需要注意： 1. 使用字节码格式的release包需要将工程级的 build-profile.json5 文件中将 useNormalizedOHMUrl 设置为 true，如： ```diff "products": [ { "name": "default", "signingConfig": "default", "compatibleSdkVersion": "5.0.1(14)", "runtimeOS": "HarmonyOS", + "buildOption": { + "strictMode": { + "useNormalizedOHMUrl": true + } + } } ], ``` ## 约束与限制 ## 兼容性要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和手机 ROM。请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@tuya-oh/react-native-image-picker Releases](https://gitee.com/rn-mi/ty-react-native-image-picker/releases) ## API > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------ | ----------------------------------------- | -------- | -------- | ----------- | ----------------- | | showImagePicker | Both launchCamera and launchImageLibrary. | function | yes | iOS Android | yes | | launchCamera | Launch camera to take photo or video. | function | yes | iOS Android | yes | | launchImageLibrary | Launch gallery to pick image or video. | function | yes | iOS Android | yes | ### 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 #### ImagePickerOptions | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | -------- | ----------- | ----------------- | | title | Specify `null` or empty string to remove the title | string | no | iOS Android | yes | | cancelButtonTitle | Specify `null` or empty string to remove this button | string | no | iOS Android | yes | | takePhotoButtonTitle | Specify `null` or empty string to remove this button | string | no | iOS Android | yes | | chooseFromLibraryButtonTitle | Specify `null` or empty string to remove this button | string | no | iOS Android | yes | | chooseWhichLibraryTitle | Specify `null` or empty string to use default Android title. Is shown when user has multiple apps that can open library. | string | no | Android | no | | customButtons | An array containing objects with the name and title of buttons | ImagePickerCustomButtonOptions[] | no | iOS Android | yes | | cameraType | 'front' or 'back' | 'front' \| 'back' | no | iOS | yes | | mediaType | 'photo', 'video', or 'mixed' on iOS, 'photo' or 'video' on Android | 'photo' \| 'video' \| 'mixed' | yes | iOS Android | yes | | maxWidth | Photos only | number | no | iOS Android | yes | | maxHeight | Photos only | number | no | iOS Android | yes | | quality | 0 to 1, photos only | number | no | iOS Android | yes | | videoQuality | 'low', 'medium', or 'high' on iOS, 'low' or 'high' on Android | 'low' \| 'medium' \| 'high' | no | iOS Android | no | | durationLimit | Max video recording time, in seconds | number | no | iOS Android | no | | rotation | Photos only, 0 to 360 degrees of rotation | number | no | Android | no | | allowsEditing | bool - enables built-in iOS functionality to resize the image after selection | boolean | no | iOS | yes | | noData | If true, disables the base64 `data` field from being generated (greatly improves performance on large photos) | boolean | no | iOS Android | yes | | storageOptions | If this key is provided, the image will be saved in your app's `Documents` directory on iOS, or your app's `Pictures` directory on Android (rather than a temporary directory) | ImagePickerStorageOptions | no | iOS Android | no | | permissionDenied | Options when the permission is denied | ImagePickerPermissionDeniedOptions | no | Android | yes | | tintColor | Application color scheme | string | no | iOS | no | #### launchCamera Options | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | -------- | ----------- | ----------------- | | cameraType | 'front' or 'back' | 'front' \| 'back' | no | iOS | yes | | mediaType | 'photo', 'video', or 'mixed' on iOS, 'photo' or 'video' on Android | 'photo' \| 'video' \| 'mixed' | yes | iOS Android | yes | | maxWidth | Photos only | number | no | iOS Android | yes | | maxHeight | Photos only | number | no | iOS Android | yes | | quality | 0 to 1, photos only | number | no | iOS Android | yes | | videoQuality | 'low', 'medium', or 'high' on iOS, 'low' or 'high' on Android | 'low' \| 'medium' \| 'high' | no | iOS Android | no | | durationLimit | Max video recording time, in seconds | number | no | iOS Android | no | | rotation | Photos only, 0 to 360 degrees of rotation | number | no | Android | no | | noData | If true, disables the base64 `data` field from being generated (greatly improves performance on large photos) | boolean | no | iOS Android | yes | | storageOptions | If this key is provided, the image will be saved in your app's `Documents` directory on iOS, or your app's `Pictures` directory on Android (rather than a temporary directory) | ImagePickerStorageOptions | no | iOS Android | no | | permissionDenied | Options when the permission is denied | ImagePickerPermissionDeniedOptions | no | Android | yes | #### launchImageLibrary Options | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------- | -------- | ----------- | ----------------- | | mediaType | 'photo', 'video', or 'mixed' on iOS, 'photo' or 'video' on Android | 'photo' \| 'video' \| 'mixed' | yes | iOS Android | yes | | maxWidth | Photos only | number | no | iOS Android | yes | | maxHeight | Photos only | number | no | iOS Android | yes | | quality | 0 to 1, photos only | number | no | iOS Android | yes | | videoQuality | 'low', 'medium', or 'high' on iOS, 'low' or 'high' on Android | 'low' \| 'medium' \| 'high' | no | iOS Android | no | | rotation | Photos only, 0 to 360 degrees of rotation | number | no | Android | no | | allowsEditing | bool - enables built-in iOS functionality to resize the image after selection | boolean | no | iOS | yes | | noData | If true, disables the base64 `data` field from being generated (greatly improves performance on large photos) | boolean | no | iOS Android | yes | | permissionDenied | Options when the permission is denied | ImagePickerPermissionDeniedOptions | no | Android | yes | | tintColor | Application color scheme | string | no | iOS | no | #### ImagePickerCustomButtonOptions | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----- | ------------------- | ------ | -------- | ----------- | ----------------- | | name | Custom button name | string | no | iOS Android | yes | | title | Custom button title | string | no | iOS Android | yes | #### ImagePickerStorageOptions | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | ----------------- | | skipBackup | If true, the photo will NOT be backed up to iCloud | boolean | no | iOS | no | | path | If set, will save the image at `Documents/[path]/` rather than the root `Documents` for iOS, and `Pictures/[path]/` on Android. | string | no | iOS Android | no | | cameraRoll | If true, the cropped photo will be saved to the iOS Camera Roll or Android DCIM folder. | boolean | no | iOS Android | no | | waitUntilSaved | If true, will delay the response callback until after the photo/video was saved to the Camera Roll. If the photo or video was just taken, then the file name and timestamp fields are only provided in the response object when this AND `cameraRoll` are both true. | boolean | no | iOS | no | #### ImagePickerPermissionDeniedOptions | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | ----------------- | | title | Title of explaining permissions dialog. By default `Permission denied`. | string | no | Android | yes | | text | Message of explaining permissions dialog. By default `To be able to take pictures with your camera and choose images from your library.`. | string | no | Android | yes | | reTryTitle | Title of re-try button. By default `re-try` | string | no | Android | yes | | okTitle | Title of ok button. By default `I'm sure` | string | no | Android | yes | #### ImagePickerResponse | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ---------------------------------------------------------------------- | ------- | -------- | ----------- | ----------------- | | didCancel | Informs you if the user cancelled the process | boolean | no | iOS Android | yes | | error | Contains an error message, if there is one | string | no | iOS Android | yes | | customButton | If the user tapped one of your custom buttons, contains the name of it | string | no | iOS Android | yes | | data | The base64 encoded image data (photos only) | string | no | iOS Android | yes | | uri | The uri to the local file asset on the device (photo or video) | string | no | iOS Android | yes | | origURL | The URL of the original asset in photo library, if it exists | string | no | iOS | yes | | isVertical | Will be true if the image is vertically oriented | boolean | no | iOS Android | yes | | width | Image dimensions (photos only) | number | no | iOS Android | yes | | height | Image dimensions (photos only) | number | no | iOS Android | yes | | fileSize | The file size (photos only) | number | no | iOS Android | yes | | type | The file type (photos only) | string | no | iOS Android | yes | | fileName | The file name, if available | string | no | iOS Android | yes | | path | The file path | string | no | iOS Android | yes | | latitude | Latitude metadata, if available | number | no | iOS Android | no | | longitude | Longitude metadata, if available | number | no | iOS Android | no | | timestamp | Timestamp metadata, if available, in ISO8601 UTC format | string | no | iOS Android | yes | | originalRotation | Rotation degrees (photos only) | number | no | Android | yes | ## 遗留问题 - [ ] react-native-image-picker 部分属性和返回值未适配 HarmonyOS ## 其他 ## 开源协议本项目基于 [The MIT License (MIT)](https://github.com/react-native-image-picker/react-native-image-picker/blob/main/LICENSE.md) ，请自由地享受和参与开源。