From da60cb781df0a0c73f1f2e4d4b020e57ca3d05bd Mon Sep 17 00:00:00 2001 From: JustinYT Date: Mon, 24 Nov 2025 21:01:49 +0800 Subject: [PATCH] docs: update usage-docs Signed-off-by: JustinYT --- en/freakycoder-react-native-bounceable.md | 7 +- en/react-native-image-capinsets-next.md | 107 ++++++++++++++-- en/react-native-image-colors.md | 15 +-- en/react-native-popup-menu.md | 16 ++- en/react-native-textinput-maxlength-fixed.md | 44 ++++++- en/react-native-video-controls.md | 12 +- zh-cn/freakycoder-react-native-bounceable.md | 25 ++-- zh-cn/react-native-image-capinsets-next.md | 119 +++++++++++++----- zh-cn/react-native-image-colors.md | 49 ++++---- zh-cn/react-native-popup-menu.md | 78 +++++++----- .../react-native-textinput-maxlength-fixed.md | 39 +++--- zh-cn/react-native-video-controls.md | 66 +++++----- 12 files changed, 397 insertions(+), 180 deletions(-) diff --git a/en/freakycoder-react-native-bounceable.md b/en/freakycoder-react-native-bounceable.md index f7bb1f88..4a294f71 100644 --- a/en/freakycoder-react-native-bounceable.md +++ b/en/freakycoder-react-native-bounceable.md @@ -14,9 +14,13 @@

+> [!TIP] [GitHub address](https://github.com/WrathChaos/react-native-bounceable/tree/1.0.3) +| Version | Support RN version | +| ------------------------- | -------------------------- | +| 1.0.3 | 0.72/0.77 | -> [!TIP] [GitHub address](https://github.com/WrathChaos/react-native-bounceable/tree/1.0.3) +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. ## Installation and Usage @@ -114,6 +118,7 @@ const styles = StyleSheet.create({ This document is verified based on the following versions: 1. RNOH: 0.72.28; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.500; ROM：5.0.0.31; +2. RNOH: 0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## Properties And Static Methods (If Any) diff --git a/en/react-native-image-capinsets-next.md b/en/react-native-image-capinsets-next.md index 3d622943..933a7301 100644 --- a/en/react-native-image-capinsets-next.md +++ b/en/react-native-image-capinsets-next.md @@ -14,9 +14,16 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-image-capinsets-next) -## Installation and Usage +Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-image-capinsets-next Releases](https://github.com/react-native-oh-library/react-native-image-capinsets-next/releases). + +| Third-party Library Version | Release Information | Support RN version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.6.1 |[@react-native-oh-tpl/react-native-image-capinsets-next Releases](https://github.com/react-native-oh-library/react-native-image-capinsets-next/releases)| 0.72 | +| 0.7.0 |[@react-native-ohos/react-native-image-capinsets-next Releases]() | 0.77 | + +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-image-capinsets-next Releases](https://github.com/react-native-oh-library/react-native-image-capinsets-next/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +## Installation and Usage Go to the project directory and execute the following instruction: @@ -27,13 +34,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-image-capinsets-next + +# 0.77 +npm install @react-native-ohos/react-native-image-capinsets-next ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-image-capinsets-next + +# 0.77 +yarn add @react-native-ohos/react-native-image-capinsets-next ``` @@ -123,6 +138,8 @@ export default YourImage; ## Use Codegen +V0.7.0 for RN0.77 does not require execution of Codegen. + If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md). ## Link @@ -152,12 +169,20 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- V0.6.1 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", "@react-native-oh-tpl/react-native-image-capinsets-next": "file:../../node_modules/@react-native-oh-tpl/react-native-image-capinsets-next/harmony/rn_image_capinsets.har" } ``` +- V0.7.0 +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-image-capinsets-next": "file:../../node_modules/@react-native-ohos/react-native-image-capinsets-next/harmony/rn_image_capinsets.har" + } +``` Click the `sync` button in the upper right corner. @@ -172,13 +197,77 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Introducing RNCImageCapInsets Component to ArkTS +### 3.Configure CMakeLists and introduce ImageCapinsetsNextPackage + +> [!TIP] If using version 0.6.1, please skip this chapter. + +Open `entry/src/main/cpp/CMakeLists.txt` and add： + +``` +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-capinsets-next/src/main/cpp" ./rn-image-capinsets) +# 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_rn_image_capinsets) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add： + +``` +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "ImageCapinsetsNextPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4. Introducing RNCImageCapInsets Component to ArkTS (If the code of the repository is written through CAPI, delete this section.)
Find `function buildCustomRNComponent()`, which is usually located in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets`, and add the following code: ```diff ... + // V0.6.1 + import { IMAGE_CAP_INSETS, RNCImageCapInsets } from "@react-native-oh-tpl/react-native-image-capinsets-next" + // V0.7.0 ++ import { IMAGE_CAP_INSETS, RNCImageCapInsets } from "@react-native-ohos/react-native-image-capinsets-next" @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { @@ -207,13 +296,16 @@ const arkTsComponentNames: Array = [ ]; ``` -### 4. Introducing RNCImageCapInsetsPackage to ArkTS +### 5. Introducing RNCImageCapInsetsPackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... + // V0.6.1 + import { RNCImageCapInsetsPackage } from '@react-native-oh-tpl/react-native-image-capinsets-next/ts'; + // V0.7.0 ++ import { RNCImageCapInsetsPackage } from '@react-native-ohos/react-native-image-capinsets-next/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -223,7 +315,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5. Running +### 6. Running Click the `sync` button in the upper right corner. @@ -240,9 +332,10 @@ Then build and run the code. ### Compatibility -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. +This document is verified based on the following versions: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-image-capinsets-next Releases](https://github.com/react-native-oh-library/react-native-image-capinsets-next/releases) +1. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +2. RNOH: 0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## Properties diff --git a/en/react-native-image-colors.md b/en/react-native-image-colors.md index d2499ac3..046b97c2 100644 --- a/en/react-native-image-colors.md +++ b/en/react-native-image-colors.md @@ -15,8 +15,6 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-image-colors) -## Installation and Usage - Please refer to the Releases page of the third-party library for the corresponding version information | Third-party Library Version | Release Information | Supported RN Version | @@ -27,6 +25,8 @@ Please refer to the Releases page of the third-party library for the correspondi For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +## Installation and Usage + Go to the project directory and execute the following instruction: @@ -353,15 +353,10 @@ Then build and run the code. ### Compatibility -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. - -Please refer to the Releases page of the third-party library for the corresponding version information +This document is verified based on the following versions: -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 2.4.0@deprecated | [@react-native-oh-tpl/react-native-image-colors Releases(deprecated)](https://github.com/react-native-oh-library/react-native-image-colors/releases) | 0.72 | -| 2.4.1 | [@react-native-ohos/react-native-image-colors Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-colors/releases) | 0.72 | -| 2.5.1 | [@react-native-ohos/react-native-image-colors Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-colors/releases) | 0.77 | +1. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +2. RNOH: 0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## API diff --git a/en/react-native-popup-menu.md b/en/react-native-popup-menu.md index c40b4400..6ff396a7 100644 --- a/en/react-native-popup-menu.md +++ b/en/react-native-popup-menu.md @@ -12,9 +12,14 @@

+> [!TIP] [GitHub address](https://github.com/instea/react-native-popup-menu/tree/58b78642808ab28012f429d59a2c302dc41b5924) +| Version | Support RN version | +| ------------------------- | -------------------------- | +| 0.16.1 | 0.72 | +| 0.18.0 | 0.77 | -> [!TIP] [GitHub address](https://github.com/instea/react-native-popup-menu/tree/58b78642808ab28012f429d59a2c302dc41b5924) +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. ## Installation and Usage @@ -25,13 +30,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install react-native-popup-menu@0.16.1 --save + +# 0.77 +npm install react-native-popup-menu@0.18.0 --save ``` #### **yarn** ```bash +# 0.72 yarn add react-native-popup-menu@0.16.1 + +# 0.77 +yarn add react-native-popup-menu@0.18.0 ``` @@ -89,6 +102,7 @@ This document is verified based on the following versions: 1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：205.0.0.18; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. RNOH: 0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## Properties diff --git a/en/react-native-textinput-maxlength-fixed.md b/en/react-native-textinput-maxlength-fixed.md index a912083e..7de79330 100644 --- a/en/react-native-textinput-maxlength-fixed.md +++ b/en/react-native-textinput-maxlength-fixed.md @@ -13,9 +13,15 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed) -## Installation and Usage +Find the matching version information in the release address of a third-party library：[@react-native-oh-tpl/react-native-textinput-maxlength-fixed Releases](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed/releases). +| Third-party Library Version | Release Information | Support RN version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.1.2 | [@react-native-oh-tpl/react-native-textinput-maxlength-fixed Releases](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed/releases) | 0.72 | +| 0.2.0 | [@react-native-ohos/react-native-textinput-maxlength-fixed Releases]() | 0.77 | + +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. -Find the matching version information in the release address of a third-party library：[@react-native-oh-tpl/react-native-textinput-maxlength-fixed Releases](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +## Installation and Usage Go to the project directory and execute the following instruction: @@ -24,13 +30,19 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-textinput-maxlength-fixed +# 0.77 +npm install @react-native-ohos/react-native-textinput-maxlength-fixed ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-textinput-maxlength-fixed +# 0.77 +yarn add @react-native-ohos/react-native-textinput-maxlength-fixed ``` @@ -82,6 +94,8 @@ const styles = StyleSheet.create({ ## Use Codegen +> [!TIP] V0.2.0 for RN0.77 does not require execution of Codegen. + If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md). ## Link @@ -102,7 +116,7 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. ``` ### 2.Introducing Native Code -> [!TIP] 引入原生代码之前请确认IDE版本，5.0.3.810及其之后的版本需要在harmony工程中的hvigor-config.json5文件中新增如下配置以解决路径过长导致的编译报错问题 +> [!TIP] Before introducing native code, please confirm the IDE version. For versions 5.0.3.810 and later, the following configuration needs to be added to the hvigor-config.json5 file in the Harmony project to solve the compilation error caused by excessively long paths > "properties":{ > "ohos.nativeResolver":false > } @@ -118,12 +132,24 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- V0.1.2 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", "@react-native-oh-tpl/react-native-textinput-maxlength-fixed": "file:../../node_modules/@react-native-oh-tpl/react-native-textinput-maxlength-fixed/harmony/textinput_maxlength_fixed.har" } ``` + +- V0.2.0 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-textinput-maxlength-fixed": "file:../../node_modules/@react-native-ohos/react-native-textinput-maxlength-fixed/harmony/textinput_maxlength_fixed.har" + } +``` + Click the `sync` button in the upper right corner. Method 2: Directly link to the source code. @@ -138,7 +164,10 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co import { RNPackageContext, RNPackage } from '@rnoh/react-native-openharmony'; import { SampleTurboModulePackage } from '../TurboModule/SampleTurboModulePackage'; import { ViewPagerPackage } from '@react-native-oh-tpl/react-native-pager-view/ts'; +// V0.1.2 +import { RNTextinputMaxlengthFixedPackage } from "@react-native-oh-tpl/react-native-textinput-maxlength-fixed/ts"; +// V0.2.0 ++import { RNTextinputMaxlengthFixedPackage } from "@react-native-ohos/react-native-textinput-maxlength-fixed/ts"; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -148,13 +177,15 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { ]; } ``` + ## Constraints ### Compatibility -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. +This document is verified based on the following versions: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-textinput-maxlength-fixed Releases](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed/releases) +1. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +2. RNOH: 0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## API @@ -164,9 +195,10 @@ Check the release version information in the release address of the third-party | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| multiply | Calculate the product of two numbers. | number | no | All | yes | +| multiply | Calculate the product of two numbers. | number | no | All | yes | ## Known Issues + ## Others ## License diff --git a/en/react-native-video-controls.md b/en/react-native-video-controls.md index e04fdc6c..6635691c 100644 --- a/en/react-native-video-controls.md +++ b/en/react-native-video-controls.md @@ -12,9 +12,14 @@

- > [!TIP] [Github address](https://github.com/itsnubix/react-native-video-controls) +| Version | Support RN version | +| ------------------------- | -------------------------- | +| 2.8.1 | 0.72/0.77 | + +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. + ## Installation and Usage > [!TIP] Need matching services and third-party dependencies. @@ -26,7 +31,7 @@ react-native-video-controls depends on the follow third-party library: | react-native-video | >=2.0.0 | | lodash | ^4.16.4 | -The library depends on [@react-native-oh-tpl/react-native-video](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-video.md#link) and simplify development JS tool [lodash](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/lodash.md) +The library depends on [@react-native-oh-tpl/react-native-video](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-video.md#link) and simplify development JS tool [lodash](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/js/lodash.md) Go to the project directory and execute the following instruction: @@ -96,7 +101,7 @@ export default App; The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-video. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. If it is not included, follow the guide provided in @react-native-oh-tpl/react-native-video to add it to your project. -If the library has not been included, please refer to [@react-native-oh-tpl/react-native-video](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-video.md#link) and [lodash](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/lodash.md) for introducing.After finished installation, please use command `npm list react-native-video` and `npm list lodash` in terminal, and check if the component video version and lodash tool version are correct. +If the library has not been included, please refer to [@react-native-oh-tpl/react-native-video](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-video.md#link) and [lodash](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/js/lodash.md) for introducing.After finished installation, please use command `npm list react-native-video` and `npm list lodash` in terminal, and check if the component video version and lodash tool version are correct. ## Constraints @@ -105,6 +110,7 @@ If the library has not been included, please refer to [@react-native-oh-tpl/reac This document is verified based on the following versions: 1. RNOH: 0.72.28; SDK: HarmonyOS NEXT Developer Beta3 5.0.0.36(12 Beta3); IDE: DevEco Studio 5.0.3.535; ROM: 5.0.0.31; +2. RNOH: 0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## Properties diff --git a/zh-cn/freakycoder-react-native-bounceable.md b/zh-cn/freakycoder-react-native-bounceable.md index b510785b..c8a8af65 100644 --- a/zh-cn/freakycoder-react-native-bounceable.md +++ b/zh-cn/freakycoder-react-native-bounceable.md @@ -14,9 +14,13 @@

+> [!TIP] [Github 地址](https://github.com/WrathChaos/react-native-bounceable/tree/1.0.3) +| 三方库版本 | 支持RN版本 | +| ------------------------- | -------------------------- | +| 1.0.3 | 0.72/0.77 | -> [!TIP] [Github 地址](https://github.com/WrathChaos/react-native-bounceable/tree/1.0.3) +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 ## 安装与使用 @@ -113,7 +117,8 @@ const styles = StyleSheet.create({ 本文档内容基于以下版本验证： -1. RNOH: 0.72.28; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.500; ROM：5.0.0.31; +1. RNOH：0.72.28; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.500; ROM：5.0.0.31; +2. RNOH：0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性和方法 @@ -123,14 +128,14 @@ const styles = StyleSheet.create({ | Property | Description | Type | Required | Platform | HarmonyOS Support | | ----------------- | ------------------------------------------------------------ | :------: | :------: | ----------- | ----------------- | -| bounceEffectIn | change the bounce effect's value（reduce） | number | no | iOS/Android | yes | -| bounceEffectOut | change the bounce effect's value（amplification） | number | no | iOS/Android | yes | -| bounceVelocityIn | The speed of the press | number | no | iOS/Android | yes | -| bounceVelocityOut | The speed at which it is released | number | no | iOS/Android | yes | -| bouncinessIn | Elastic coefficient when pressed (set value 0-50 has obvious effect display) | number | no | iOS/Android | yes | -| bouncinessOut | Elastic coefficient when released (set value 0-50 has obvious effect display) | number | no | iOS/Android | yes | -| onPress | set your own logic for the onPress functionality | function | no | iOS/Android | yes | -| style | set the style like any other View container | style | no | iOS/Android | yes | +| bounceEffectIn | 改变反弹效果的值（缩小） | number | no | iOS/Android | yes | +| bounceEffectOut | 改变反弹效果的值（放大） | number | no | iOS/Android | yes | +| bounceVelocityIn | 按压时的速度 | number | no | iOS/Android | yes | +| bounceVelocityOut | 释放时的速度 | number | no | iOS/Android | yes | +| bouncinessIn | 按压时的弹性系数（设置值0-50有明显效果显示） | number | no | iOS/Android | yes | +| bouncinessOut | 释放时的弹性系数（设置值0-50有明显效果显示） | number | no | iOS/Android | yes | +| onPress | 为onPress功能设置自己的逻辑 | function | no | iOS/Android | yes | +| style | 像任何其他View容器一样设置样式 | style | no | iOS/Android | yes | ## 遗留问题 diff --git a/zh-cn/react-native-image-capinsets-next.md b/zh-cn/react-native-image-capinsets-next.md index a0223878..dfdfc804 100644 --- a/zh-cn/react-native-image-capinsets-next.md +++ b/zh-cn/react-native-image-capinsets-next.md @@ -14,14 +14,15 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-capinsets-next) -## 安装与使用 - -请到三方库的 Releases 发布地址查看配套的版本信息，并下载适用版本的 tgz 包： - +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： | 三方库版本 | 发布信息 | 支持RN版本 | | ---------- | ------------------------------------------------------------ | ---------- | -| 0.6.1 | [@react-native-oh-tpl/react-native-image-capinsets-next Releases](https://github.com/react-native-oh-library/react-native-image-capinsets-next/releases) | 0.72 | -| 0.6.2 | [@react-native-ohos/react-native-image-capinsets-next Releases Releases]() | 0.77 | +| 0.6.1 |[@react-native-oh-tpl/react-native-image-capinsets-next Releases](https://github.com/react-native-oh-library/react-native-image-capinsets-next/releases)| 0.72 | +| 0.7.0 |[@react-native-ohos/react-native-image-capinsets-next Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + +## 安装与使用 进入到工程目录并输入以下命令： @@ -30,20 +31,20 @@ #### **npm** ```bash -# V0.6.1 +# 0.72 npm install @react-native-oh-tpl/react-native-image-capinsets-next -# V0.6.2 +# 0.77 npm install @react-native-ohos/react-native-image-capinsets-next ``` #### **yarn** ```bash -# V0.6.1 +# 0.72 yarn add @react-native-oh-tpl/react-native-image-capinsets-next -# V0.6.2 +# 0.77 yarn add @react-native-ohos/react-native-image-capinsets-next ``` @@ -134,6 +135,8 @@ export default YourImage; ## 使用 Codegen +> [!TIP] V0.7.0 for RN0.77 不需要执行 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -167,23 +170,19 @@ export default YourImage; 打开 `entry/oh-package.json5`，添加以下依赖 - V0.6.1 - ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", "@react-native-oh-tpl/react-native-image-capinsets-next": "file:../../node_modules/@react-native-oh-tpl/react-native-image-capinsets-next/harmony/rn_image_capinsets.har" } ``` - -- V0.6.2 - +- V0.7.0 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", "@react-native-ohos/react-native-image-capinsets-next": "file:../../node_modules/@react-native-ohos/react-native-image-capinsets-next/harmony/rn_image_capinsets.har" } ``` - 点击右上角的 `sync` 按钮 或者在终端执行： @@ -197,7 +196,68 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNCImageCapInsets 组件 +### 3.配置 CMakeLists 和引入 ImageCapinsetsNextPackage + +> [!TIP] 若使用的是 0.6.1 版本，请跳过本章。 + +打开 `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) # 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-capinsets-next/src/main/cpp" ./rn-image-capinsets) +# 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_rn_image_capinsets) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +``` +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "ImageCapinsetsNextPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4.在 ArkTs 侧引入 RNCImageCapInsets 组件 找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： @@ -205,8 +265,7 @@ ohpm install ... // V0.6.1 + import { IMAGE_CAP_INSETS, RNCImageCapInsets } from "@react-native-oh-tpl/react-native-image-capinsets-next" - - // V0.6.2 + // V0.7.0 + import { IMAGE_CAP_INSETS, RNCImageCapInsets } from "@react-native-ohos/react-native-image-capinsets-next" @Builder @@ -236,16 +295,15 @@ const arkTsComponentNames: Array = [ ]; ``` -### 4.在 ArkTs 侧引入 xxx Package +### 5.在 ArkTs 侧引入 RNCImageCapInsetsPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... - // V0.6.1 + // V0.6.1 + import { RNCImageCapInsetsPackage } from '@react-native-oh-tpl/react-native-image-capinsets-next/ts'; - - // V0.6.2 + // V0.7.0 + import { RNCImageCapInsetsPackage } from '@react-native-ohos/react-native-image-capinsets-next/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -256,7 +314,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5.运行 +### 6.运行 点击右上角的 `sync` 按钮 @@ -273,15 +331,10 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库的 Releases 发布地址查看配套的版本信息，并下载适用版本的 tgz 包： - -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.6.1 | [@react-native-oh-tpl/react-native-image-capinsets-next Releases](https://github.com/react-native-oh-library/react-native-image-capinsets-next/releases) | 0.72 | -| 0.6.2 | [@react-native-ohos/react-native-image-capinsets-next Releases Releases]() | 0.77 | +在以下版本验证通过 +1. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +2. RNOH：0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性 @@ -291,8 +344,8 @@ ohpm install | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| source | Image source data | [ImageSource](https://reactnative.cn/docs/next/image#imagesource) | yes | All | yes | -| capInsets | When the image is scaled, the size of the corners specified by the capInsets is fixed without scaling, while the rest of the middle and sides are stretched. This is useful for making variable-size rounded button shadows and other resources | [Rect](https://reactnative.cn/docs/next/rect) | no | All | yes | +| source | 图像源数据 | [ImageSource](https://reactnative.cn/docs/next/image#imagesource) | yes | All | yes | +| capInsets | 当图像被缩放时，由capInsets指定的角部尺寸固定不变而不进行缩放，而中间和边缘的其余部分会被拉伸。这对于制作可变尺寸的圆角按钮阴影和其他资源非常有用 | [Rect](https://reactnative.cn/docs/next/rect) | no | All | yes | ## 其他 diff --git a/zh-cn/react-native-image-colors.md b/zh-cn/react-native-image-colors.md index f75f1594..a03dd7fa 100644 --- a/zh-cn/react-native-image-colors.md +++ b/zh-cn/react-native-image-colors.md @@ -15,8 +15,6 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-colors) -## 安装与使用 - 请到三方库的 Releases 发布地址查看配套的版本信息： | 三方库版本 | 发布信息 | 支持RN版本 | @@ -27,6 +25,8 @@ 对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 + 进入到工程目录并输入以下命令： @@ -358,15 +358,10 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +在以下版本验证通过 -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 2.4.0@deprecated | [@react-native-oh-tpl/react-native-image-colors Releases(deprecated)](https://github.com/react-native-oh-library/react-native-image-colors/releases) | 0.72 | -| 2.4.1 | [@react-native-ohos/react-native-image-colors Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-colors/releases) | 0.72 | -| 2.5.1 | [@react-native-ohos/react-native-image-colors Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-colors/releases) | 0.77 | +1. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +2. RNOH：0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## API @@ -379,7 +374,7 @@ ohpm install | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------- | ------------------------------------- | -------- | -------- | -------- | ----------------- | -| getColors | Fetch prominent colors from an image. | Function | yes | all | yes | +| getColors | 从图像中获取主要颜色 | Function | yes | all | yes | ### Uri @@ -388,7 +383,7 @@ A string which can be: | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------- | ------------------------------------- | -------- | -------- | -------- | ----------------- | -| uri | 1. URL: [`https://i.imgur.com/O3XSdU7.jpg`](https://i.imgur.com/O3XSdU7.jpg);
2. Local file: const catImg = require('./images/cat.jpg');
3. Base64: const catImgBase64 = 'data:image/jpeg;base64,/9j/4Ri...' | string | yes | all | yes | +| uri | 1. URL: `https://i.imgur.com/O3XSdU7.jpg`
2. 本地文件: const catImg = require('./images/cat.jpg')
3. Base64: const catImgBase64 = 'data:image/jpeg;base64,/9j/4Ri...' | string | yes | all | yes | > The mime type prefix for base64 is required (e.g. data:image/png;base64). @@ -398,12 +393,12 @@ The config object is optional. | Name | Description | Type | Required | Default | Supported | HarmonyOS Support | | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------- | ------------------- | ----------------- | ----------------- | -| `fallback` | If a color property couldn't be retrieved, it will default to this hex color string | `string` | no | `"#000000"` | all | yes | -| `cache` | Enables in-memory caching of the result - skip downloading the same image next time. | `boolean` | no | `false` | all | yes | -| `key` | Unique key to use for the cache entry. The image URI is used as the unique key by default. You should explicitly pass a key if you enable caching and you're using a base64 string as the URI. | `string` | no | `undefined` | all | yes | -| `headers` | HTTP headers to be sent along with the GET request to download the image | `Record` | no | `undefined` | iOS, Android | yes | -| `pixelSpacing` | How many pixels to skip when iterating over image pixels. Higher means better performance (**note**: value cannot be lower than 1). | `number` | no | `5` | Android | no | -| `quality` | Highest implies no downscaling and very good colors. | `'lowest'`
`'low'`
`'high'`
`'highest'` | no | `'low'` | iOS, Web | no | +| `fallback` | 如果无法检索到颜色属性，将默认使用此十六进制颜色字符串 | `string` | no | `"#000000"` | all | yes | +| `cache` | 启用结果的内存缓存 - 下次跳过下载相同图像 time. | `boolean` | no | `false` | all | yes | +| `key` | 用于缓存条目的唯一键。默认使用图像URI作为唯一键。如果启用缓存并使用base64字符串作为URI，应显式传递键 | `string` | no | `undefined` | all | yes | +| `headers` | 与下载图像的GET请求一起发送的HTTP头 | `Record` | no | `undefined` | iOS, Android | yes | +| `pixelSpacing` | 迭代图像像素时要跳过的像素数。值越高性能越好（注意：值不能低于1） | `number` | no | `5` | Android | no | +| `quality` | 最高意味着不降尺度且颜色非常好 | `'lowest'`
`'low'`
`'high'`
`'highest'` | no | `'low'` | iOS, Web | no | ### ImageColorsResult @@ -413,20 +408,20 @@ HarmonyImageColors | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------ | --------------------------------------------------- | ----------- | -------- | --------- | ----------------- | -| `mainColor` | The main colors of the image. | `string` | no | harmonyOS | yes | -| `largestProportionColor` | The color with the highest proportion in the image. | `string` | no | harmonyOS | yes | -| `highestSaturationColor` | The color with the highest saturation in the image. | `string` | no | harmonyOS | yes | -| `averageColor` | The average color of the image. | `string` | no | harmonyOS | yes | -| `platform` | The platform is HarmonyOS. | `string` | no | all | yes | +| `mainColor` | 图像的主要颜色 | `string` | no | harmonyOS | yes | +| `largestProportionColor` | 图像中比例最高的颜色 | `string` | no | harmonyOS | yes | +| `highestSaturationColor` | 图像中饱和度最高的颜色 | `string` | no | harmonyOS | yes | +| `averageColor` | 图像的平均颜色 | `string` | no | harmonyOS | yes | +| `platform` | 平台是HarmonyOS | `string` | no | all | yes | ### ImageColors.cache | Name | Description | Type | Required | Params | Platform | HarmonyOS Support | | --------- | ------------------------------------- | -------- | -------- | -------- | -------- | ----------------- | -| getItem | Read cache result. | Function | no | key: string | all | yes | -| setItem | Set a cached result. | Function | no | key: string, value: ImageColorsResult | all | yes | -| removeItem | Delete a cached result. | Function | no | key: string | all | yes | -| clear | Clearing the cache. | Function | no | | all | yes | +| getItem | 读取缓存结果 | Function | no | key: string | all | yes | +| setItem | 设置缓存结果 | Function | no | key: string, value: ImageColorsResult | all | yes | +| removeItem | 删除缓存结果 | Function | no | key: string | all | yes | +| clear | 清除缓存 | Function | no | | all | yes | ### Notes diff --git a/zh-cn/react-native-popup-menu.md b/zh-cn/react-native-popup-menu.md index 8ad40020..f7d2a54f 100644 --- a/zh-cn/react-native-popup-menu.md +++ b/zh-cn/react-native-popup-menu.md @@ -12,9 +12,14 @@

+> [!TIP] [Github 地址](https://github.com/instea/react-native-popup-menu/tree/58b78642808ab28012f429d59a2c302dc41b5924) +| 三方库版本 | 支持RN版本 | +| ------------------------- | -------------------------- | +| 0.16.1 | 0.72 | +| 0.18.0 | 0.77 | -> [!TIP] [Github 地址](https://github.com/instea/react-native-popup-menu/tree/58b78642808ab28012f429d59a2c302dc41b5924) +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 ## 安装与使用 @@ -25,13 +30,21 @@ #### **npm** ```bash +# 0.72 npm install react-native-popup-menu@0.16.1 --save + +# 0.77 +npm install react-native-popup-menu@0.18.0 --save ``` #### **yarn** ```bash +# 0.72 yarn add react-native-popup-menu@0.16.1 + +# 0.77 +yarn add react-native-popup-menu@0.18.0 ``` @@ -89,6 +102,7 @@ export const YourComponent = () => ( 1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：205.0.0.18; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. RNOH：0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性 @@ -102,57 +116,57 @@ export const YourComponent = () => ( | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | -| style | Style of wrapping View component. | Style | No | IOS/Android | Yes | -| customStyles | Object defining wrapper, touchable and text styles | Object | No | IOS/Android | Yes | -| backHandler | Whether to close the menu when the back button is pressed or custom back button handler if a function is passed (RN >= 0.44 is required) | boolean/Function | No | IOS/Android | Yes | -| skipInstanceCheck | Normally your application should have only one menu provider (with exception as discussed above). If you really need more instances, set skipInstanceCheck to true to disable the check (and following warning message) | boolean | No | IOS/Android | Yes | +| style | 包装View组件的样式 | Style | No | IOS/Android | Yes | +| customStyles | 定义包装器、可触摸和文本样式的对象 | Object | No | IOS/Android | Yes | +| backHandler | 按下返回按钮时是否关闭菜单，如果传递函数则为自定义返回按钮处理程序（需要RN >= 0.44） | boolean/Function | No | IOS/Android | Yes | +| skipInstanceCheck | 通常应用程序应该只有一个菜单提供者。如果确实需要更多实例，请将skipInstanceCheck设置为true以禁用检查（和随后的警告消息） | boolean | No | IOS/Android | Yes | #### Menu | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | --------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | -| name | Unique name of menu | String | No | IOS/Android | Yes | -| opened | Declaratively states if menu is opened. When this prop is provided, menu is controlled and imperative API won't work. | Boolean | No | IOS/Android | Yes | -| renderer | Defines position, animation and basic menu styles. See renderers section for more details | Function | No | IOS/Android | Yes | -| rendererProps | Additional props which will be passed to the renderer | Object | No | IOS/Android | Yes | -| onSelect | Triggered when menu option is selected. When event handler returns false, the popup menu remains open | Function | No | IOS/Android | Yes | -| onOpen | Triggered when menu is opened | Function | No | IOS/Android | Yes | -| onClose | Triggered when menu is closed | Function | No | IOS/Android | Yes | -| onBackdropPress | Triggered when user press backdrop (outside of the opened menu) | Function | No | IOS/Android | Yes | +| name | 菜单的唯一名称 | String | No | IOS/Android | Yes | +| opened | 声明菜单是否打开。当提供此属性时，菜单是受控的，命令式API将不起作用 | Boolean | No | IOS/Android | Yes | +| renderer | 定义位置、动画和基本菜单样式。有关更多详细信息，请参阅渲染器部分 | Function | No | IOS/Android | Yes | +| rendererProps | 将传递给渲染器的附加属性 | Object | No | IOS/Android | Yes | +| onSelect | 选择菜单选项时触发。当事件处理程序返回false时，弹出菜单保持打开状态 | Function | No | IOS/Android | Yes | +| onOpen | 菜单打开时触发 | Function | No | IOS/Android | Yes | +| onClose | 菜单关闭时触发 | Function | No | IOS/Android | Yes | +| onBackdropPress | 用户按下背景（打开的菜单外部）时触发 | Function | No | IOS/Android | Yes | #### MenuTrigger | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | ------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | -| disabled | Indicates if trigger can be pressed | Boolean | No | IOS/Android | Yes | -| children | React elements to render as menu trigger. Exclusive with text property | Elements | No | IOS/Android | Yes | -| text | Text to be rendered. When this prop is provided, trigger's children won't be rendered | String | No | IOS/Android | Yes | -| customStyles | Object defining wrapper, touchable and text styles | Object | No | IOS/Android | Yes | -| triggerOnLongPress | If true, menu will trigger onLongPress instead of onPress | Boolean | No | IOS/Android | Yes | -| testID | Used for e2e testing to get Touchable element | String | No | IOS/Android | Yes | -| onPress | Triggered when trigger is pressed (or longpressed depending on triggerOnLongPress) | Function | No | IOS/Android | Yes | -| onAlternativeAction | Triggered when trigger is longpressed (or pressed depending on triggerOnLongPress) | Function | No | IOS/Android | Yes | +| disabled | 指示触发器是否可以被按下 | Boolean | No | IOS/Android | Yes | +| children | 作为菜单触发器渲染的React元素。与text属性互斥 | Elements | No | IOS/Android | Yes | +| text | 要渲染的文本。当提供此属性时，不会渲染触发器的子元素 | String | No | IOS/Android | Yes | +| customStyles | 定义包装器、可触摸和文本样式的对象 | Object | No | IOS/Android | Yes | +| triggerOnLongPress | 如果为true，菜单将在onLongPress上触发而不是onPress | Boolean | No | IOS/Android | Yes | +| testID | 用于e2e测试以获取可触摸元素 | String | No | IOS/Android | Yes | +| onPress | 按下触发器时触发（取决于triggerOnLongPress，可能是长按） | Function | No | IOS/Android | Yes | +| onAlternativeAction | 长按触发器时触发（取决于triggerOnLongPress，可能是按下） | Function | No | IOS/Android | Yes | #### MenuOptions | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | -| optionsContainerStyle | Custom styles for options container. Note: this option is deprecated, use customStyles option instead | Style | No | IOS/Android | Yes | -| renderOptionsContainer | Custom render function for . It takes options component as argument and returns component. E.g.: options => {options} (Deprecated) | Function | No | IOS/Android | Yes | -| customStyles | Object defining wrapper, touchable and text styles | Object | No | IOS/Android | Yes | +| optionsContainerStyle | 选项容器的自定义样式。注意：此选项已弃用，请改用customStyles选项 | Style | No | IOS/Android | Yes | +| renderOptionsContainer | \的自定义渲染函数。它以选项组件作为参数并返回组件。例如：options => \{options}\（已弃用） | Function | No | IOS/Android | Yes | +| customStyles | 定义包装器、可触摸和文本样式的对象 | Object | No | IOS/Android | Yes | #### MenuOption | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | -| value | Value of option | Any | No | IOS/Android | Yes | -| children | React elements to render as menu option. Exclusive with text property | Elements | No | IOS/Android | Yes | -| text | Text to be rendered. When this prop is provided, option's children won't be rendered | String | No | IOS/Android | Yes | -| disabled | Indicates if option can be pressed | Boolean | No | IOS/Android | Yes | -| disableTouchable | Disables Touchable wrapper (no on press effect and no onSelect execution) Note: Alternatively you don't have to use MenuOption at all if you want render something "non-selectable" in the menu (e.g. divider) | Boolean | No | IOS/Android | Yes | -| customStyles | Object defining wrapper, touchable and text styles | Object | No | IOS/Android | Yes | -| testID | Used for e2e testing to get Touchable element. If disableTouchable=true, it is not available | String | No | IOS/Android | Yes | -| onSelect | Triggered when option is selected. When event handler returns false, the popup menu remains open. Note: If this event handler is defined, it suppress onSelect handler of | Function | No | IOS/Android | Yes | +| value | 选项的值 | Any | No | IOS/Android | Yes | +| children | 作为菜单选项渲染的React元素。与text属性互斥 | Elements | No | IOS/Android | Yes | +| text | 要渲染的文本。当提供此属性时，不会渲染选项的子元素 | String | No | IOS/Android | Yes | +| disabled | 指示选项是否可以被按下 | Boolean | No | IOS/Android | Yes | +| disableTouchable | 禁用可触摸包装器（无按下效果且不执行onSelect）。注意：如果要在菜单中渲染"不可选择"的内容（例如分隔符），可以完全不使用MenuOption | Boolean | No | IOS/Android | Yes | +| customStyles | 定义包装器、可触摸和文本样式的对象 | Object | No | IOS/Android | Yes | +| testID | 用于e2e测试以获取可触摸元素。如果disableTouchable=true，则不可用 | String | No | IOS/Android | Yes | +| onSelect | 选择选项时触发。当事件处理程序返回false时，弹出菜单保持打开状态。注意：如果定义了此事件处理程序，它将抑制\的onSelect处理程序 | Function | No | IOS/Android | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-textinput-maxlength-fixed.md b/zh-cn/react-native-textinput-maxlength-fixed.md index ab90c971..326856c9 100644 --- a/zh-cn/react-native-textinput-maxlength-fixed.md +++ b/zh-cn/react-native-textinput-maxlength-fixed.md @@ -13,16 +13,16 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed) -## 安装与使用 - 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | +| 三方库版本 | 发布信息 | 支持RN版本 | | ---------- | ------------------------------------------------------------ | ---------- | | 0.1.2 | [@react-native-oh-tpl/react-native-textinput-maxlength-fixed Releases](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed/releases) | 0.72 | -| 0.1.3 | [@react-native-ohos/react-native-textinput-maxlength-fixed Releases]() | 0.77 | +| 0.2.0 | [@react-native-ohos/react-native-textinput-maxlength-fixed Releases]() | 0.77 | 对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 + 进入到工程目录并输入以下命令： @@ -30,18 +30,18 @@ #### **npm** ```bash -# 0.1.2 +# 0.72 npm install @react-native-oh-tpl/react-native-textinput-maxlength-fixed -# 0.1.3 +# 0.77 npm install @react-native-ohos/react-native-textinput-maxlength-fixed ``` #### **yarn** ```bash -# 0.1.2 +# 0.72 yarn add @react-native-oh-tpl/react-native-textinput-maxlength-fixed -# 0.1.3 +# 0.77 yarn add @react-native-ohos/react-native-textinput-maxlength-fixed ``` @@ -94,7 +94,7 @@ const styles = StyleSheet.create({ ## 使用 Codegen -> [!TIP] V0.1.3 for RN0.77 不需要执行 Codegen。 +> [!TIP] V0.2.0 for RN0.77 不需要执行 Codegen。 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 @@ -132,6 +132,7 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 - V0.1.2 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -139,13 +140,15 @@ const styles = StyleSheet.create({ } ``` -- V0.1.3 +- V0.2.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", "@react-native-ohos/react-native-textinput-maxlength-fixed": "file:../../node_modules/@react-native-ohos/react-native-textinput-maxlength-fixed/harmony/textinput_maxlength_fixed.har" } ``` + 点击右上角的 `sync` 按钮 方法二：直接链接源码 @@ -162,7 +165,7 @@ import { SampleTurboModulePackage } from '../TurboModule/SampleTurboModulePackag import { ViewPagerPackage } from '@react-native-oh-tpl/react-native-pager-view/ts'; // V0.1.2 +import { RNTextinputMaxlengthFixedPackage } from "@react-native-oh-tpl/react-native-textinput-maxlength-fixed/ts"; -// V0.1.3 +// V0.2.0 +import { RNTextinputMaxlengthFixedPackage } from "@react-native-ohos/react-native-textinput-maxlength-fixed/ts"; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -173,19 +176,15 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { ]; } ``` + ## 约束与限制 ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.1.2 | [@react-native-oh-tpl/react-native-textinput-maxlength-fixed Releases](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed/releases) | 0.72 | -| 0.1.3 | [@react-native-ohos/react-native-textinput-maxlength-fixed Releases]() | 0.77 | +在以下版本验证通过 -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +1. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +2. RNOH：0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## API @@ -195,7 +194,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| multiply | Calculate the product of two numbers. | number | no | All | yes | +| multiply | 计算两个数字的乘积 | number | no | All | yes | ## 遗留问题 ## 其他 diff --git a/zh-cn/react-native-video-controls.md b/zh-cn/react-native-video-controls.md index b04981bb..9686c8ad 100644 --- a/zh-cn/react-native-video-controls.md +++ b/zh-cn/react-native-video-controls.md @@ -12,9 +12,14 @@

- > [!TIP] [Github 地址](https://github.com/itsnubix/react-native-video-controls) +| 三方库版本 | 支持RN版本 | +| ------------------------- | -------------------------- | +| 2.8.1 | 0.72/0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + ## 安装与使用 > [!TIP] 需要配套的服务和三方依赖 @@ -26,7 +31,7 @@ react-native-video-controls依赖于以下三方库 | react-native-video | >=2.0.0 | | lodash | ^4.16.4 | -本库依赖[@react-native-oh-tpl/react-native-video](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-video.md#link)以及简化开发的JS工具[lodash](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/lodash.md) +本库依赖[@react-native-oh-tpl/react-native-video](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-video.md#link)以及简化开发的JS工具[lodash](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/js/lodash.md) 进入到工程目录并输入以下命令： @@ -96,7 +101,7 @@ export default App; 本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-video代码以及简化开发工具lodash，如已在 HarmonyOS 工程中引入过这些库，且版本无误则无需再次引入，可跳过本章节步骤，直接使用。 -如未引入请参照[@react-native-oh-tpl/react-native-video文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-video.md#link)和[lodash文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/lodash.md)进行引入。安装完成后请在终端使用`npm list react-native-video`和`npm list lodash`查看video组件版本和lodash工具版本是否正确 +如未引入请参照[@react-native-oh-tpl/react-native-video文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-video.md#link)和[lodash文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/js/lodash.md)进行引入。安装完成后请在终端使用`npm list react-native-video`和`npm list lodash`查看video组件版本和lodash工具版本是否正确 ## 约束与限制 @@ -104,7 +109,8 @@ export default App; 本文档内容基于以下版本验证通过： -1. RNOH: 0.72.28; SDK: HarmonyOS NEXT Developer Beta3 5.0.0.36(12 Beta3); IDE: DevEco Studio 5.0.3.535; ROM: 5.0.0.31; +1. RNOH：0.72.28; SDK: HarmonyOS NEXT Developer Beta3 5.0.0.36(12 Beta3); IDE: DevEco Studio 5.0.3.535; ROM: 5.0.0.31; +2. RNOH：0.77.17; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性 @@ -116,32 +122,32 @@ export default App; | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------------- | ------------------------------------------------------------ | :----------: | :------: | :---------: | :---------------: | -| toggleResizeModeOnFullscreen | If true, clicking the fullscreen button will toggle the `