代码拉取完成，页面将自动刷新
Template version: v0.2.2
react-native-image-picker
[!TIP] GitHub address
Find the matching version information in the release address of a third-party library: @react-native-oh-tpl/react-native-image-picker Releases.For older versions that are not published to npm, please refer to the installation guide to install the tgz package.
Go to the project directory and execute the following instruction:
npm install @react-native-oh-tpl/react-native-image-picker
yarn add @react-native-oh-tpl/react-native-image-picker
The following code shows the basic use scenario of the repository:
[!WARNING] The name of the imported repository remains unchanged.
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;
Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking.
Open the harmony directory of the HarmonyOS project in DevEco Studio.
{
...
"overrides": {
"@rnoh/react-native-openharmony" : "./react_native_openharmony"
}
}
Currently, two methods are available:
Method 1 (recommended): Use the HAR file.
[!TIP] The HAR file is stored in the
harmonydirectory in the installation path of the third-party library.
Open entry/oh-package.json5 file and add the following dependencies:
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
"@react-native-oh-tpl/react-native-image-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-image-picker/harmony/image_picker.har"
}
Click the sync button in the upper right corner.
Alternatively, run the following instruction on the terminal:
cd entry
ohpm install
Method 2: Directly link to the source code.
[!TIP] For details, see Directly Linking Source Code.
Open entry/src/main/cpp/CMakeLists.txt and add the following code:
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-oh-tpl/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
Open entry/src/main/cpp/PackageProvider.cpp and add the following code:
#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),
};
}
Open the entry/src/main/ets/RNPackagesFactory.ts file and add the following code:
...
+ import { ImagePickerViewPackage } from '@react-native-oh-tpl/react-native-image-picker/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
+ new ImagePickerViewPackage(ctx)
];
}
Click the sync button in the upper right corner.
Alternatively, run the following instruction on the terminal:
cd entry
ohpm install
Then build and run the code.
To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
Check the release version information in the release address of the third-party library: @react-native-oh-tpl/react-native-image-picker Releases
[!TIP] The Platform column indicates the platform where the properties are supported in the original third-party library.
[!TIP] If the value of HarmonyOS Support is yes, it means that the HarmonyOS platform supports this property; no means the opposite; partially means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| mediaType | photo or video or mixed(launchCamera on Android does not support 'mixed'). Web only supports 'photo' for now. | string | yes | iOS Android Web | yes |
| maxWidth | To resize the image. | number | no | iOS Android | no |
| maxHeight | To resize the image. | number | no | iOS Android | no |
| videoQuality | low, medium, or high on iOS, low or high on Android. | string | no | iOS Android | no |
| durationLimit | Video max duration (in seconds). | number | no | iOS Android | no |
| quality | 0 to 1, photos. | number | no | iOS Android | no |
| cameraType | 'back' or 'front' (May not be supported in few android devices). | string | no | iOS Android | yes |
| includeBase64 | If true, creates base64 string of the image (Avoid using on large image files due to performance). | boolean | no | iOS Android Web | yes |
| includeExtra | If true, will include extra data which requires library permissions to be requested (i.e. exif data). | boolean | no | iOS Android | no |
| saveToPhotos | (Boolean) Only for launchCamera, saves the image/video file captured to public photo. | boolean | no | iOS Android | no |
| selectionLimit | Supports providing any integer value. Use 0 to allow any number of files on iOS version >= 14 & Android version >= 13, Use 0 to allow up to 50 files on HarmonyOS. Default is 1. | number | no | iOS Android Web | yes |
| presentationStyle | Controls how the picker is presented. currentContext, pageSheet, fullScreen, formSheet, popover, overFullScreen, overCurrentContext. Default is currentContext. | string | no | iOS | no |
| formatAsMp4 | Converts the selected video to MP4 (iOS Only). | boolean | no | iOS | no |
| assetRepresentationMode | A mode that determines which representation to use if an asset contains more than one. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'. | string | no | iOS | no |
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| didCancel | true if the user cancelled the process | boolean | no | iOS Android Web | yes |
| errorCode | Check ErrorCode for all error codes | string | no | iOS Android Web | no |
| errorMessage | Description of the error, use it for debug purpose only | string | no | iOS Android Web | no |
| assets | Array of the selected media, refer to Asset Object | Asset | no | iOS Android Web | yes |
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| base64 | The base64 string of the image (photos only) | string | no | iOS Android Web | yes |
| uri | The file uri in app specific cache storage. Except when picking video from Android gallery where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri. | string | yes | iOS Android Web | yes |
| originalPath | The original file path. | string | yes | iOS Android Web | yes |
| width | Asset dimensions | number | yes | iOS Android Web | yes |
| height | Asset dimensions | number | yes | iOS Android Web | yes |
| fileSize | The file size | number | yes | iOS Android | yes |
| type | The file type | string | yes | iOS Android | yes |
| fileName | The file name | string | yes | iOS Android | yes |
| duration | The selected video duration in seconds | number | no | iOS Android | no |
| bitrate | The average bitrate (in bits/sec) of the selected video, if available. (Android only) | number | no | Android | no |
| timestamp | Timestamp of the asset. Only included if 'includeExtra' is true | string | no | iOS Android | no |
| id | local identifier of the photo or video. On Android & HarmonyOS, this is the same as | string | no | iOS Android | yes |
[!TIP] The Platform column indicates the platform where the properties are supported in the original third-party library.
[!TIP] If the value of HarmonyOS Support is yes, it means that the HarmonyOS platform supports this property; no means the opposite; partially means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| launchCamera | Launch camera to take photo or video. | function | yes | iOS Android Web | yes |
| launchImageLibrary | Launch gallery to pick image or video. | function | yes | iOS Android Web | yes |
This project is licensed under The MIT License (MIT).
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
