From 458794377f368da6016e952535ec3c118a743941 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=B3=E4=B8=9C=E6=B5=B7?= Date: Sat, 13 Dec 2025 10:04:18 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=89=E6=96=B9=E5=BA=93=E9=80=82?= =?UTF-8?q?=E9=85=8Dcli=E5=B7=A5=E5=85=B7=E9=9C=80=E6=B1=82=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E6=95=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-date-picker.md | 74 ++++----- en/react-native-ffmpeg-kit.md | 57 ++++--- en/react-native-keyboard-controller.md | 46 ++++-- en/react-native-shared-element.md | 78 ++++++---- en/react-native-spinkit.md | 137 +++++++++++------ en/react-native-textinput-maxlength-fixed.md | 144 +++++++++++++----- zh-cn/react-native-date-picker.md | 76 ++++----- zh-cn/react-native-ffmpeg-kit.md | 58 +++---- zh-cn/react-native-keyboard-controller.md | 69 ++++----- zh-cn/react-native-shared-element.md | 78 ++++++---- zh-cn/react-native-spinkit.md | 125 ++++++++++----- .../react-native-textinput-maxlength-fixed.md | 142 ++++++++++++----- 12 files changed, 674 insertions(+), 410 deletions(-) diff --git a/en/react-native-date-picker.md b/en/react-native-date-picker.md index 57a77dbf..1df94fd5 100644 --- a/en/react-native-date-picker.md +++ b/en/react-native-date-picker.md @@ -14,14 +14,17 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-date-picker) -This third-party library has been migrated to Gitcode and is now available for direct download from npm, the new package name is: `@react-native-ohos/react-native-date-picker`, After introducing the new version of the third-party library, The version correspondence details are as follows: +## Installation and Usage -| Third-party Library Version | Release Information | Supported RN Version | -| --------------------------- | ------------------------------------------------------------ | -------------------- | -| 5.0.5 | [@react-native-oh-tpl/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases) | 0.72 | -| 5.1.0 | [@react-native-ohos/react-native-date-picker Releases]() | 0.77 | +Please refer to the Releases page of the third-party library for the corresponding version information -## Installation and Usage +| Third-party Library Version | Release Information | Supported RN Version | +|-----------------------------| ------------------------------------------------------------ | ---------- | +| <= 5.0.5@deprecated | [@react-native-oh-tpl/react-native-date-picker Releases(deprecated)](https://github.com/react-native-oh-library/react-native-date-picker/releases) | 0.72 | +| 5.0.6 | [@react-native-ohos/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases) | 0.72 | +| 5.1.0 | [@react-native-ohos/react-native-date-picker Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-datepicker/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. Go to the project directory and execute the following instruction: @@ -30,20 +33,12 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash -# 0.72 -npm install @react-native-oh-tpl/react-native-date-picker - -# 0.77 npm install @react-native-ohos/react-native-date-picker ``` #### **yarn** ```bash -# 0.72 -yarn add @react-native-oh-tpl/react-native-date-picker - -# 0.77 yarn add @react-native-ohos/react-native-date-picker ``` @@ -83,13 +78,23 @@ export default () => { ``` ## Use 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). +This library has been adapted for `Codegen`. Before using it, you need to proactively generate the bridge code for the third-party library. For details, please refer to the [Codegen Usage Documentation](/en/codegen.md). ## Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +| | Is supported autolink | Supported RN Version | +|---------------------|-----------------------|----------------------| +| ~5.1.0 | No | 0.77 | +| ~5.0.6 | Yes | 0.72 | +| <= 5.0.5@deprecated | No | 0.72 | -Open the `harmony` directory of the HarmonyOS project in DevEco Studio. +Using AutoLink need to be configured according to this document, Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +If the version you use supports Autolink and the project has been connected to Autolink, skip the ManualLink configuration. +
+ ManualLink: this step is a guide to manually configure native dependencies. + +First, use DevEco Studio to open the HarmonyOS project `harmony` in the project directory. ### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project @@ -115,17 +120,6 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: -- 0.72 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-date-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-date-picker/harmony/date_picker.har" - } -``` - -- 0.77 - ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -146,9 +140,9 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3.Configure CMakeLists and introduce RNDatePickerPackage +### 3.Configure CMakeLists and introduce DatePickerPackage -> [!TIP] Only 0.77 requires configuration of CMakeLists and introduction of RNDatePickerPackage. +> If you are using version <= 5.0.5, please skip this chapter. Open `entry/src/main/cpp/CMakeLists. txt` and add the following code: @@ -204,10 +198,6 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src ```diff ... -// 0.72 -+ import { RNDatePicker } from "@react-native-oh-tpl/react-native-date-picker" - -// 0.77 + import { RNDatePicker } from "@react-native-ohos/react-native-date-picker" @Builder @@ -241,10 +231,6 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co ```diff ... -// 0.72 -+ import {RNDatePickerPackage} from '@react-native-oh-tpl/react-native-date-picker/ts'; - -// 0.77 + import {RNDatePickerPackage} from '@react-native-ohos/react-native-date-picker/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -255,7 +241,9 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 6. Running +
+ +## Running Click the `sync` button in the upper right corner. @@ -272,11 +260,13 @@ Then build and run the code. ### Compatibility -Verified in the following version: +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. -RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200;ROM: 3.0.0.18; +Verified in the following versions. -RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK;IDE: DevEco Studio 6.0.0.868;ROM:6.0.0.112; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## Properties diff --git a/en/react-native-ffmpeg-kit.md b/en/react-native-ffmpeg-kit.md index 9f355c5b..1b958abf 100644 --- a/en/react-native-ffmpeg-kit.md +++ b/en/react-native-ffmpeg-kit.md @@ -17,28 +17,30 @@ > [!tip] [Github Address](https://github.com/react-native-oh-library/ffmpeg-kit) ## Installation & Usage -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 6.0.3 | [@react-native-oh-tpl/react-native-ffmpeg-kit release](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.72 -| 6.1.0 | [@react-native-ohos/react-native-ffmpeg-kit release](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.77 -Navigate to your project directory and run the following commands: +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 | +|-----------------------------| ------------------------------------------------------------ | ---------- | +| <= 6.0.3@deprecated | [@react-native-oh-tpl/react-native-ffmpeg-kit Releases(deprecated)](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.72 | +| 6.0.4 | [@react-native-ohos/react-native-ffmpeg-kit Releases](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.72 | +| 6.1.0 | [@react-native-ohos/react-native-ffmpeg-kit Releases](https://github.com/react-native-oh-library/ffmpeg-kit/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. + +Go to the project directory and execute the following instruction: + + #### **npm** ```bash -#0.72 -npm install @react-native-oh-tpl/react-native-ffmpeg-kit -#0.77 npm install @react-native-ohos/react-native-ffmpeg-kit ``` #### **yarn** ```bash -#0.72 -yarn add @react-native-oh-tpl/react-native-ffmpeg-kit -#0.77 yarn add @react-native-ohos/react-native-ffmpeg-kit ``` @@ -279,9 +281,19 @@ const styles = StyleSheet.create({ ## Link -Currently, HarmonyOS does not support AutoLink, so the Link step needs to be configured manually. +| | Is supported autolink | Supported RN Version | +|---------------------|-----------------------|----------------------| +| ~6.1.0 | No | 0.77 | +| ~6.0.4 | Yes | 0.72 | +| <= 6.0.3@deprecated | No | 0.72 | + +Using AutoLink need to be configured according to this document, Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md -First, you need to open the HarmonyOS project `harmony` in your project using DevEco Studio. +If the version you use supports Autolink and the project has been connected to Autolink, skip the ManualLink configuration. +
+ ManualLink: this step is a guide to manually configure native dependencies. + +First, use DevEco Studio to open the HarmonyOS project `harmony` in the project directory. ### 1. Add the overrides field to `oh-package.json5` in the project root directory @@ -310,10 +322,6 @@ Open `entry/oh-package.json5` and add the following dependencies: ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - //0.72 - "@react-native-oh-tpl/react-native-ffmpeg-kit": "file:../../node_modules/@react-native-oh-tpl/react-native-ffmpeg-kit/harmony/ffmpeg_kit.har", - //0.77 "@react-native-ohos/react-native-ffmpeg-kit": "file:../../node_modules/@react-native-ohos/react-native-ffmpeg-kit/harmony/ffmpeg_kit.har", } ``` @@ -333,6 +341,8 @@ Method 2: Directly link source code ### 3. Configure CMakeLists and import GestureHandlerPackage +> If you are using version <= 6.0.3, please skip this chapter. + Open `entry/src/main/cpp/CMakeLists.txt` and add: ```diff @@ -353,9 +363,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -#0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-ffmpeg-kit/src/main/cpp" ./ffmpeg-kit) -#0.77 + + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-ffmpeg-kit/src/main/cpp" ./ffmpeg-kit) # RNOH_END: manual_package_linking_1 @@ -391,14 +399,11 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4. Import Gesture Handler Package on ArkTs side +### 4. Import FFmpegKitPackage on ArkTs side Open `entry/src/main/ets/RNPackagesFactory.ts` and add: ```diff -//0.72 -+ import { FFmpegKitPackage } from '@react-native-oh-tpl/react-native-ffmpeg-kit/ts'; -//0.77 + import { FFmpegKitPackage } from '@react-native-ohos/react-native-ffmpeg-kit/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -409,7 +414,9 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5. Run +
+ +## Running Click the `sync` button in the upper right corner. diff --git a/en/react-native-keyboard-controller.md b/en/react-native-keyboard-controller.md index ec1419c6..fd3a68b1 100644 --- a/en/react-native-keyboard-controller.md +++ b/en/react-native-keyboard-controller.md @@ -16,24 +16,30 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases). +Please refer to the Releases page of the third-party library for the corresponding version information -Go to the project directory and execute the following instruction: +| Third-party Library Version | Release Information | Supported RN Version | +|-----------------------------| ------------------------------------------------------------ | ---------- | +| <= 1.12.7-0.0.5@deprecated | [@react-native-oh-tpl/react-native-keyboard-controller Releases(deprecated)](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases) | 0.72 | +| 1.12.8 | [@react-native-ohos/react-native-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases) | 0.72 | +| 1.16.6 | [@react-native-ohos/react-native-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/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. +Go to the project directory and execute the following instruction: #### **npm** ```bash -npm install @react-native-oh-tpl/react-native-keyboard-controller +npm install @react-native-ohos/react-native-keyboard-controller ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-keyboard-controller +yarn add @react-native-ohos/react-native-keyboard-controller ``` @@ -129,9 +135,19 @@ export default App; ## Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +| | Is supported autolink | Supported RN Version | +|----------------------------|-----------------------|----------------------| +| ~1.16.6 | No | 0.77 | +| ~1.12.8 | Yes | 0.72 | +| <= 1.12.7-0.0.5@deprecated | No | 0.72 | + +Using AutoLink need to be configured according to this document, Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +If the version you use supports Autolink and the project has been connected to Autolink, skip the ManualLink configuration. +
+ ManualLink: this step is a guide to manually configure native dependencies. -Open the `harmony` directory of the HarmonyOS project in DevEco Studio. +First, use DevEco Studio to open the HarmonyOS project `harmony` in the project directory. ### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project @@ -158,7 +174,7 @@ 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-keyboard-controller": "file:../../node_modules/@react-native-oh-tpl/react-native-keyboard-controller/harmony/keyboard_controller.har" + "@react-native-ohos/react-native-keyboard-controller": "file:../../node_modules/@react-native-ohos/react-native-keyboard-controller/harmony/keyboard_controller.har" } ``` @@ -178,6 +194,8 @@ Method 2: Directly link to the source code. ### 3. Configuring CMakeLists and Introducing RNKeyboardControllerPackage and RNStatusBarManagerCompatPackage +> If you are using version <= 1.12.7-0.0.5, please skip this chapter. + Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff @@ -198,7 +216,7 @@ 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-keyboard-controller/src/main/cpp" ./keyboard-controller) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-keyboard-controller/src/main/cpp" ./keyboard-controller) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -240,7 +258,7 @@ std::vector> PackageProvider::getPackages(Package::Cont Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff -+ import {RNKeyboardControllerPackage,RNStatusBarManagerCompatPackage} from "@react-native-oh-tpl/react-native-keyboard-controller/ts"; ++ import {RNKeyboardControllerPackage,RNStatusBarManagerCompatPackage} from "@react-native-ohos/react-native-keyboard-controller/ts"; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -251,7 +269,9 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5. Running +
+ +## Running Click the `sync` button in the upper right corner. @@ -270,7 +290,11 @@ 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-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases) +Verified successfully in the following versions: + +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## API diff --git a/en/react-native-shared-element.md b/en/react-native-shared-element.md index d9f59460..fac0c2ac 100644 --- a/en/react-native-shared-element.md +++ b/en/react-native-shared-element.md @@ -14,38 +14,34 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-shared-element) +## 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 | | ---------- | ------------------------------------------------------------ | ---------- | -| <=0.8.9-0.0.6 | [@react-native-oh-tpl/react-native-shared-element Releases](https://github.com/react-native-oh-library/react-native-shared-element/releases) | 0.72 | -| 0.9.1 | [@react-native-ohos/react-native-shared-element Releases]() | 0.77 | +| <= 0.8.9-0.0.6@deprecated | [@react-native-oh-tpl/react-native-shared-element Releases(deprecated)](https://github.com/react-native-oh-library/react-native-shared-element/releases) | 0.72 | +| 0.8.10 | [@react-native-ohos/react-native-shared-element Releases](https://github.com/react-native-oh-library/react-native-shared-element/releases) | 0.72 | +| 0.9.1 | [@react-native-ohos/react-native-shared-element Releases](https://github.com/react-native-oh-library/react-native-shared-element/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. -## Installation and Usage - Go to the project directory and execute the following instruction: + #### **npm** ```bash -# 0.72 -npm install @react-native-oh-tpl/react-native-shared-element - -# 0.77 + npm install @react-native-ohos/react-native-shared-element ``` #### **yarn** ```bash -# 0.72 -yarn add @react-native-oh-tpl/react-native-shared-element - -# 0.77 + yarn add @react-native-ohos/react-native-shared-element ``` @@ -223,9 +219,19 @@ const styles = StyleSheet.create({ ## Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +| | Is supported autolink | Supported RN Version | +|--------------------------------------|-----------------------|----------------------| +| ~0.9.1 | No | 0.77 | +| ~0.8.10 | Yes | 0.72 | +| <= 0.8.9-0.0.6@deprecated | No | 0.72 | -Open the `harmony` directory of the HarmonyOS project in DevEco Studio. +Using AutoLink need to be configured according to this document, Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +If the version you use supports Autolink and the project has been connected to Autolink, skip the ManualLink configuration. +
+ ManualLink: this step is a guide to manually configure native dependencies. + +First, use DevEco Studio to open the HarmonyOS project `harmony` in the project directory. ### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project @@ -249,17 +255,6 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: -- 0.72 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-shared-element": "file:../../node_modules/@react-native-oh-tpl/react-native-shared-element/harmony/shared_element.har" -} -``` - -- 0.77 - ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -282,6 +277,8 @@ Method 2: Directly link to the source code. ### 3. Configuring CMakeLists and Introducing SharedElementPackage +> If you are using version <= 0.8.9-0.0.6, please skip this chapter. + Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff @@ -302,10 +299,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -# 0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-shared-element/src/main/cpp" ./shared-element) -# 0.77 + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-shared-element/src/main/cpp" ./shared-element) # RNOH_END: manual_package_linking_1 @@ -343,7 +337,24 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4. Running +### 4. Introducing SharedElementPackage to ArkTS + +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: + +```diff + ... ++ import { SharedElementPackage } from '@react-native-ohos/react-native-shared-element/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new SharedElementPackage(ctx), + ]; +} +``` +
+ +## Running Click the `sync` button in the upper right corner. @@ -360,10 +371,13 @@ Then build and run the code. ### Compatibility -This document is verified based on the following versions: +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. + +Verified in the following versions. -1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; -2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## Components diff --git a/en/react-native-spinkit.md b/en/react-native-spinkit.md index 0a5ed01f..9079015e 100644 --- a/en/react-native-spinkit.md +++ b/en/react-native-spinkit.md @@ -17,39 +17,31 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-spinkit) -The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/react-native-spinkit`. The specific version relationships are as follows: +## Installation and Usage -| Version | Package Name | Repository | Release |Supported RN Version | -| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- | -| 1.5.1 | @react-native-oh-tpl/react-native-spinkit | [Github](https://github.com/react-native-oh-library/react-native-spinkit) | [Github Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.72 | -| 1.6.0 | @react-native-ohos/react-native-spinkit | [Github](https://github.com/react-native-oh-library/react-native-spinkit) | [Github Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.77 | +Please refer to the Releases page of the third-party library for the corresponding version information -## Installation and Usage +| Third-party Library Version | Release Information | Supported RN Version | +|-------| ------------------------------------------------------------ | ---------- | +| <= 1.5.1-0.0.2@deprecated | [@react-native-oh-tpl/react-native-spinkit Releases(deprecated)](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.72 | +| 1.5.2 | [@react-native-ohos/react-native-spinkit Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.72 | +| 1.6.0 | [@react-native-ohos/react-native-spinkit Releases](https://github.com/react-native-oh-library/react-native-spinkit/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. Go to the project directory and execute the following instruction: - #### **npm** ```bash -# 1.5.1 -npm install @react-native-oh-tpl/react-native-spinkit - -# 1.6.0 npm install @react-native-ohos/react-native-spinkit ``` #### **yarn** ```bash -# 1.5.1 -yarn add @react-native-oh-tpl/react-native-spinkit - -# 1.6.0 yarn add @react-native-ohos/react-native-spinkit ``` @@ -80,13 +72,23 @@ export default SpinKit; ## Use 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). +This library has been adapted for `Codegen`. Before using it, you need to proactively generate the bridge code for the third-party library. For details, please refer to the [Codegen Usage Documentation](/en/codegen.md). ## Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +| | Is supported autolink | Supported RN Version | +|--------------------------------------|-----------------------|----------------------| +| ~1.6.0 | No | 0.77 | +| ~1.5.2 | Yes | 0.72 | +| <= 1.5.1-0.0.2@deprecated | No | 0.72 | + +Using AutoLink need to be configured according to this document, Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md -Open the `harmony` directory of the HarmonyOS project in DevEco Studio. +If the version you use supports Autolink and the project has been connected to Autolink, skip the ManualLink configuration. +
+ ManualLink: this step is a guide to manually configure native dependencies. + +First, use DevEco Studio to open the HarmonyOS project `harmony` in the project directory. ### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project @@ -103,7 +105,7 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. Currently, two methods are available: - + Method 1 (recommended): Use the HAR file. @@ -111,14 +113,6 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: -- 1.5.1 -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-spinkit": "file:../../node_modules/@react-native-oh-tpl/react-native-spinkit/harmony/spinKit.har" - } -``` -- 1.6.0 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -140,16 +134,72 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Introducing SpinKitView Component to ArkTS +### 3. Configuring CMakeLists and Introducing SpinKitPackage -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: +> If you are using version <= 1.5.1-0.0.2, please skip this chapter. + +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff - ... - // 1.5.1 -+ import { SpinKitView } from "@react-native-oh-tpl/react-native-spinkit" +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-spinkit/src/main/cpp" ./spinkit) +# 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_spinkit) +# RNOH_END: link_packages +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "SpinKitPackage.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 SpinKitView Component to ArkTS - // 1.6.0 +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 + import { SpinKitView } from "@react-native-ohos/react-native-spinkit" @Builder @@ -165,7 +215,7 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) { } ``` -> [!TIP] If the repository uses a mixed solution, the component name needs to be added. +> [!TIP] If the repository uses a mixed solution, the component name needs to be added. Find the constant `arkTsComponentNames` in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets` and add the component name to the array. @@ -177,16 +227,11 @@ const arkTsComponentNames: Array = [ + SpinKitView.NAME ]; ``` -### 4. Introducing SpinKitPackage to ArkTS +### 5. Introducing SpinKitPackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff - ... - // 1.5.1 -+ import { RNSpinKitPackage } from '@react-native-oh-tpl/react-native-spinkit/ts'; - - // 1.6.0 + import { RNSpinKitPackage } from '@react-native-ohos/react-native-spinkit/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -197,7 +242,9 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5. Running +
+ +## Running Click the `sync` button in the upper right corner. @@ -215,9 +262,11 @@ 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. -This document is verified based on the following versions: -1. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0; -2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0; +Verified in the following versions. + +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; 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 7de79330..755ff6bd 100644 --- a/en/react-native-textinput-maxlength-fixed.md +++ b/en/react-native-textinput-maxlength-fixed.md @@ -13,16 +13,19 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed) -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. ## 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 | +|-----------------------------| ------------------------------------------------------------ | ---------- | +| <= 0.1.2-0.0.1@deprecated | [@react-native-oh-tpl/react-native-textinput-maxlength-fixed Releases(deprecated)](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed/releases) | 0.72 | +| 0.1.4 | [@react-native-ohos/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](https://github.com/react-native-oh-library/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. + Go to the project directory and execute the following instruction: @@ -30,18 +33,12 @@ 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 ``` @@ -94,15 +91,23 @@ 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). +This library has been adapted for `Codegen`. Before using it, you need to proactively generate the bridge code for the third-party library. For details, please refer to the [Codegen Usage Documentation](/en/codegen.md). ## Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +| | Is supported autolink | Supported RN Version | +|---------------------------|-----------------------|----------------------| +| ~0.2.0 | No | 0.77 | +| ~0.1.4 | Yes | 0.72 | +| <= 0.1.2-0.0.1@deprecated | No | 0.72 | + +Using AutoLink need to be configured according to this document, Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md -Open the `harmony` directory of the HarmonyOS project in DevEco Studio. +If the version you use supports Autolink and the project has been connected to Autolink, skip the ManualLink configuration. +
+ ManualLink: this step is a guide to manually configure native dependencies. + +First, use DevEco Studio to open the HarmonyOS project `harmony` in the project directory. ### 1.Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project @@ -132,17 +137,6 @@ 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", @@ -156,17 +150,75 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3.Introducing RNTextinputMaxlengthFixedPackage Package to ArkTS +### 3. Configuring CMakeLists and Introducing RNTextinputMaxlengthFixedPackage + +> If you are using version <= 0.1.2-0.0.1, please skip this chapter. + +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: + +```diff +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-textinput-maxlength-fixed/src/main/cpp" ./textinput-maxlength-fixed) +# 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_textinput_maxlength_fixed) +# RNOH_END: link_packages +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "RNTextinputMaxlengthFixedPackage.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 RNTextinputMaxlengthFixedPackage Package to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff 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 { ViewPagerPackage } from '@react-native-ohos/react-native-pager-view/ts'; +import { RNTextinputMaxlengthFixedPackage } from "@react-native-ohos/react-native-textinput-maxlength-fixed/ts"; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -178,14 +230,32 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` +
+ +## Running + +Click the `sync` button in the upper right corner. + +Alternatively, run the following instruction on the terminal: + +```bash +cd entry +ohpm install +``` + +Then build and run the code. + ## Constraints ### Compatibility -This document is verified based on the following versions: +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. + +Verified in the following versions. -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; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## API diff --git a/zh-cn/react-native-date-picker.md b/zh-cn/react-native-date-picker.md index b0034b53..0510a0f3 100644 --- a/zh-cn/react-native-date-picker.md +++ b/zh-cn/react-native-date-picker.md @@ -1,4 +1,4 @@ -模板版本:v0.2.2 +> 模板版本:v0.2.2

react-native-date-picker

@@ -16,14 +16,17 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-date-picker) -该第三方库的仓库已迁移至 Gitcode,且支持直接从 npm 下载,新的包名为:`@react-native-ohos/react-native-date-picker`,具体版本所属关系如下: +## 安装与使用 -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 5.0.5 | [@react-native-oh-tpl/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases) | 0.72 | -| 5.1.0 | [@react-native-ohos/react-native-date-picker Releases]() | 0.77 | +请到三方库的 Releases 发布地址查看配套的版本信息: -## 安装与使用 +| 三方库版本 | 发布信息 | 支持RN版本 | +|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------| ---------- | +| <= 5.0.5@deprecated | [@react-native-oh-tpl/react-native-date-picker Releases(deprecated)](https://github.com/react-native-oh-library/react-native-date-picker/releases) | 0.72 | +| 5.0.6 | [@react-native-ohos/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases) | 0.72 | +| 5.1.0 | [@react-native-ohos/react-native-date-picker Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-datepicker/releases) | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: @@ -32,20 +35,12 @@ #### **npm** ```bash -# 0.72 -npm install @react-native-oh-tpl/react-native-date-picker - -# 0.77 npm install @react-native-ohos/react-native-date-picker ``` #### **yarn** ```bash -# 0.72 -yarn add @react-native-oh-tpl/react-native-date-picker - -# 0.77 yarn add @react-native-ohos/react-native-date-picker ``` @@ -89,15 +84,23 @@ export default () => { ## 使用 Codegen -> [!TIP] 0.77 不需要使用Codegen。 - 本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link -目前 HarmonyOS 暂不支持 AutoLink,所以 Link 步骤需要手动配置。 +| | 是否支持autolink | RN框架版本 | +|---------------------|-----------------|------------| +| ~5.1.0 | No | 0.77 | +| ~5.0.6 | Yes | 0.72 | +| <= 5.0.5@deprecated | No | 0.72 | + +使用AutoLink的工程需要根据该文档配置,Autolink框架指导文档:https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +如您使用的版本支持 Autolink,并且工程已接入 Autolink,可跳过ManualLink配置。 +
+ ManualLink: 此步骤为手动配置原生依赖项的指导 -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。 ### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 @@ -123,17 +126,6 @@ export default () => { 打开 `entry/oh-package.json5`,添加以下依赖 -- 0.72 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-date-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-date-picker/harmony/date_picker.har" - } -``` - -- 0.77 - ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -155,9 +147,9 @@ ohpm install > [!TIP] 如需使用直接链接源码,请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.配置 CMakeLists 和引入 RNDatePickerPackage +### 3.配置 CMakeLists 和引入 DatePickerPackage -> [!TIP] 仅 0.77需要配置CMakeLists 和引入 RNDatePickerPackage。 +> 若使用的是 <= 5.0.5 版本,请跳过本章 打开 `entry/src/main/cpp/CMakeLists.txt`,添加: @@ -213,10 +205,6 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... -// 0.72 -+ import { RNDatePicker } from "@react-native-oh-tpl/react-native-date-picker" - -// 0.77 + import { RNDatePicker } from "@react-native-ohos/react-native-date-picker" @Builder @@ -252,10 +240,6 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co ```diff ... -// 0.72 -+ import {RNDatePickerPackage} from '@react-native-oh-tpl/react-native-date-picker/ts'; - -// 0.77 + import {RNDatePickerPackage} from '@react-native-ohos/react-native-date-picker/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -265,7 +249,9 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { ]; } ``` -### 6.运行 +
+ +## 运行 点击右上角的 `sync` 按钮 @@ -280,11 +266,13 @@ ohpm install ### 兼容性 -在下述版本验证通过: +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -RNOH:0.72.20; SDK:HarmonyOS NEXT Developer Beta1; IDE:DevEco Studio 5.0.3.200; ROM:3.0.0.18; +在以下版本验证通过: -RNOH:0.77.18; SDK:HarmonyOS 6.0.0 Release SDK;IDE:DevEco Studio 6.0.0.868; ROM:6.0.0.112; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## 属性 diff --git a/zh-cn/react-native-ffmpeg-kit.md b/zh-cn/react-native-ffmpeg-kit.md index eac303ca..68936b92 100644 --- a/zh-cn/react-native-ffmpeg-kit.md +++ b/zh-cn/react-native-ffmpeg-kit.md @@ -17,32 +17,33 @@ > [!tip] [Github 地址](https://github.com/react-native-oh-library/ffmpeg-kit) ## 安装与使用 -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 6.0.3 | [@react-native-oh-tpl/react-native-ffmpeg-kit release](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.72 -| 6.1.0 | [@react-native-ohos/react-native-ffmpeg-kit release](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.77 -Navigate to your project directory and run the following commands: +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------| ---------- | +| <= 6.0.3@deprecated | [@react-native-oh-tpl/react-native-ffmpeg-kit Releases(deprecated)](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.72 | +| 6.0.4 | [@react-native-ohos/react-native-ffmpeg-kit Releases](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.72 | +| 6.1.0 | [@react-native-ohos/react-native-ffmpeg-kit Releases](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + +进入到工程目录并输入以下命令: + + #### **npm** ```bash -#0.72 -npm install @react-native-oh-tpl/react-native-ffmpeg-kit -#0.77 npm install @react-native-ohos/react-native-ffmpeg-kit ``` #### **yarn** ```bash -#0.72 -yarn add @react-native-oh-tpl/react-native-ffmpeg-kit -#0.77 yarn add @react-native-ohos/react-native-ffmpeg-kit ``` - 下面的代码展示了这个库的基本使用场景: > [!WARNING] 使用时 import 的库名不变。 @@ -280,9 +281,19 @@ const styles = StyleSheet.create({ ## Link -目前 HarmonyOS 暂不支持 AutoLink,所以 Link 步骤需要手动配置。 +| | 是否支持autolink | RN框架版本 | +|---------------------|-----------------|------------| +| ~6.1.0 | No | 0.77 | +| ~6.0.4 | Yes | 0.72 | +| <= 6.0.3@deprecated | No | 0.72 | + +使用AutoLink的工程需要根据该文档配置,Autolink框架指导文档:https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +如您使用的版本支持 Autolink,并且工程已接入 Autolink,可跳过ManualLink配置。 +
+ ManualLink: 此步骤为手动配置原生依赖项的指导 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。 ### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 @@ -311,10 +322,6 @@ const styles = StyleSheet.create({ ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - //0.72 - "@react-native-oh-tpl/react-native-ffmpeg-kit": "file:../../node_modules/@react-native-oh-tpl/react-native-ffmpeg-kit/harmony/ffmpeg_kit.har", - //0.77 "@react-native-ohos/react-native-ffmpeg-kit": "file:../../node_modules/@react-native-ohos/react-native-ffmpeg-kit/harmony/ffmpeg_kit.har", } ``` @@ -334,6 +341,8 @@ ohpm install ### 3.配置 CMakeLists 和引入 GestureHandlerPackage +> 若使用的是 <= 6.0.3 版本,请跳过本章 + 打开 `entry/src/main/cpp/CMakeLists.txt`,添加: ```diff @@ -354,9 +363,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -#0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-ffmpeg-kit/src/main/cpp" ./ffmpeg-kit) -#0.77 + + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-ffmpeg-kit/src/main/cpp" ./ffmpeg-kit) # RNOH_END: manual_package_linking_1 @@ -392,14 +399,11 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4.在 ArkTs 侧引入 Gesture Handler Package +### 4.在 ArkTs 侧引入 FFmpegKitPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: ```diff -//0.72 -+ import { FFmpegKitPackage } from '@react-native-oh-tpl/react-native-ffmpeg-kit/ts'; -//0.77 + import { FFmpegKitPackage } from '@react-native-ohos/react-native-ffmpeg-kit/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -409,7 +413,9 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5.运行 +
+ +## 运行 点击右上角的 `sync` 按钮 diff --git a/zh-cn/react-native-keyboard-controller.md b/zh-cn/react-native-keyboard-controller.md index 5b467cbd..9d2db61c 100644 --- a/zh-cn/react-native-keyboard-controller.md +++ b/zh-cn/react-native-keyboard-controller.md @@ -1,5 +1,3 @@ - - > 模板版本:v0.2.2

@@ -16,14 +14,15 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-keyboard-controller) - ## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息: -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.12.7 | [@react-native-oh-tpl/react-native-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases) | 0.72 | -| 1.16.6 | [@react-native-ohos/react-native-keyboard-controller Releases]() | 0.77 | + +| 三方库版本 | 发布信息 | 支持RN版本 | +|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------| ---------- | +| <= 1.12.7-0.0.5@deprecated | [@react-native-oh-tpl/react-native-keyboard-controller Releases(deprecated)](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases) | 0.72 | +| 1.12.8 | [@react-native-ohos/react-native-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases) | 0.72 | +| 1.16.6 | [@react-native-ohos/react-native-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases) | 0.77 | 对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 @@ -34,20 +33,12 @@ #### **npm** ```bash -# 1.12.7 -npm install @react-native-oh-tpl/react-native-keyboard-controller - -# 1.16.6 npm install @react-native-ohos/react-native-keyboard-controller ``` #### **yarn** ```bash -# 1.12.7 -yarn add @react-native-oh-tpl/react-native-keyboard-controller - -# 1.16.6 yarn add @react-native-ohos/react-native-keyboard-controller ``` @@ -127,9 +118,19 @@ export default App; ## Link -目前 HarmonyOS 暂不支持 AutoLink,所以 Link 步骤需要手动配置。 +| | 是否支持autolink | RN框架版本 | +|----------------------------|-----------------|------------| +| ~1.16.6 | No | 0.77 | +| ~1.12.8 | Yes | 0.72 | +| <= 1.12.7-0.0.5@deprecated | No | 0.72 | + +使用AutoLink的工程需要根据该文档配置,Autolink框架指导文档:https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +如您使用的版本支持 Autolink,并且工程已接入 Autolink,可跳过ManualLink配置。 +

+ ManualLink: 此步骤为手动配置原生依赖项的指导 -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。 ### 1. 在工程根目录的 `oh-package.json` 添加 overrides 字段 @@ -155,17 +156,6 @@ export default App; > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 打开 `entry/oh-package.json5`,添加以下依赖 -+ V1.12.7 -```json - -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-keyboard-controller": "file:../../node_modules/@react-native-oh-tpl/react-native-keyboard-controller/harmony/keyboard_controller.har" -} - -``` - -+ V1.16.6 ```json @@ -191,6 +181,8 @@ ohpm install ### 3. 配置 CMakeLists 和引入 RNKeyboardControllerPackage,RNStatusBarManagerCompatPackage +> 若使用的是 <= 1.12.7-0.0.5 版本,请跳过本章 + 打开 `entry/src/main/cpp/CMakeLists.txt`,添加: ```diff @@ -212,10 +204,6 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -# V1.12.7 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-keyboard-controller/src/main/cpp" ./keyboard-controller) - -# V1.16.6 + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-keyboard-controller/src/main/cpp" ./keyboard-controller) # RNOH_END: manual_package_linking_1 @@ -259,10 +247,6 @@ std::vector> PackageProvider::getPackages(Package::Cont 打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: ```diff -// V1.12.7 -+ import {RNKeyboardControllerPackage,RNStatusBarManagerCompatPackage} from "@react-native-oh-tpl/react-native-keyboard-controller/ts"; - -// V1.16.6 + import {RNKeyboardControllerPackage,RNStatusBarManagerCompatPackage} from "@react-native-ohos/react-native-keyboard-controller/ts"; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -273,8 +257,9 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { ]; } ``` +
-### 5. 运行 +## 运行 点击右上角的 `sync` 按钮 @@ -289,17 +274,15 @@ ohpm install ## 约束与限制 - ### 兼容性 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.12.7 | [@react-native-oh-tpl/react-native-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases) | 0.72 | -| 1.16.6 | [@react-native-ohos/react-native-keyboard-controller Releases]() | 0.77 | +在以下版本验证通过: +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## API diff --git a/zh-cn/react-native-shared-element.md b/zh-cn/react-native-shared-element.md index dd0c6a5a..16dcaf17 100644 --- a/zh-cn/react-native-shared-element.md +++ b/zh-cn/react-native-shared-element.md @@ -14,17 +14,18 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-shared-element) +## 安装与使用 + 请到三方库的 Releases 发布地址查看配套的版本信息: -| Third-party Library Version | Release Information | Supported RN Version | +| 三方库版本 | 发布信息 | 支持RN版本 | | ---------- | ------------------------------------------------------------ | ---------- | -| <=0.8.9-0.0.6 | [@react-native-oh-tpl/react-native-shared-element Releases](https://github.com/react-native-oh-library/react-native-shared-element/releases) | 0.72 | -| 0.9.1 | [@react-native-ohos/react-native-shared-element Releases]() | 0.77 | +| <= 0.8.9-0.0.6@deprecated | [@react-native-oh-tpl/react-native-shared-element Releases(deprecated)](https://github.com/react-native-oh-library/react-native-shared-element/releases) | 0.72 | +| 0.8.10 | [@react-native-ohos/react-native-shared-element Releases](https://github.com/react-native-oh-library/react-native-shared-element/releases) | 0.72 | +| 0.9.1 | [@react-native-ohos/react-native-shared-element Releases](https://github.com/react-native-oh-library/react-native-shared-element/releases) | 0.77 | 对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 -## 安装与使用 - 进入到工程目录并输入以下命令: @@ -32,20 +33,14 @@ #### **npm** ```bash -# 0.72 -npm install @react-native-oh-tpl/react-native-shared-element - -# 0.77 + npm install @react-native-ohos/react-native-shared-element ``` #### **yarn** ```bash -# 0.72 -yarn add @react-native-oh-tpl/react-native-shared-element - -# 0.77 + yarn add @react-native-ohos/react-native-shared-element ``` @@ -224,9 +219,19 @@ const styles = StyleSheet.create({ ## Link -目前 HarmonyOS 暂不支持 AutoLink,所以 Link 步骤需要手动配置。 +| | 是否支持autolink | RN框架版本 | +|--------------------------------------|-----------------|------------| +| ~0.9.1 | No | 0.77 | +| ~0.8.10 | Yes | 0.72 | +| <= 0.8.9-0.0.6@deprecated | No | 0.72 | + +使用AutoLink的工程需要根据该文档配置,Autolink框架指导文档:https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +如您使用的版本支持 Autolink,并且工程已接入 Autolink,可跳过ManualLink配置。 +
+ ManualLink: 此步骤为手动配置原生依赖项的指导 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。 ### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 @@ -252,17 +257,6 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`,添加以下依赖 -- 0.72 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-shared-element": "file:../../node_modules/@react-native-oh-tpl/react-native-shared-element/harmony/shared_element.har" -} -``` - -- 0.77 - ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -285,6 +279,8 @@ ohpm install ### 3.配置 CMakeLists 和引入 SharedElementPackage +> 若使用的是 <= 0.8.9-0.0.6 版本,请跳过本章。 + 打开 `entry/src/main/cpp/CMakeLists.txt`,添加: ```diff @@ -305,10 +301,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -# 0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-shared-element/src/main/cpp" ./shared-element) -# 0.77 + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-shared-element/src/main/cpp" ./shared-element) # RNOH_END: manual_package_linking_1 @@ -346,7 +339,24 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4.运行 +### 4.在 ArkTs 侧引入 SharedElementPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: + +```diff + ... ++ import { SharedElementPackage } from '@react-native-ohos/react-native-shared-element/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new SharedElementPackage(ctx), + ]; +} +``` +
+ +## 运行 点击右上角的 `sync` 按钮 @@ -363,11 +373,13 @@ ohpm install ### 兼容性 -本文档内容基于以下版本验证通过: +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; -2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; +在以下版本验证通过: +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## 组件 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 diff --git a/zh-cn/react-native-spinkit.md b/zh-cn/react-native-spinkit.md index 30a6f17d..b47c2379 100644 --- a/zh-cn/react-native-spinkit.md +++ b/zh-cn/react-native-spinkit.md @@ -13,17 +13,18 @@

- - > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-spinkit) -| Version | Package Name | Repository | Release |Supported RN Version | -| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- | -| 1.5.1 | @react-native-oh-tpl/react-native-spinkit | [Github](https://github.com/react-native-oh-library/react-native-spinkit) | [Github Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.72 | -| 1.6.0 | @react-native-ohos/react-native-spinkit | [Github](https://github.com/react-native-oh-library/react-native-spinkit) | [Github Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.77 | - ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +|-------| ------------------------------------------------------------ | ---------- | +| <= 1.5.1-0.0.2@deprecated | [@react-native-oh-tpl/react-native-spinkit Releases(deprecated)](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.72 | +| 1.5.2 | [@react-native-ohos/react-native-spinkit Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.72 | +| 1.6.0 | [@react-native-ohos/react-native-spinkit Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.77 | + 对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: @@ -33,20 +34,12 @@ #### **npm** ```bash -# 1.5.1 -npm install @react-native-oh-tpl/react-native-spinkit - -# 1.6.0 npm install @react-native-ohos/react-native-spinkit ``` #### **yarn** ```bash -# 1.5.1 -yarn add @react-native-oh-tpl/react-native-spinkit - -# 1.6.0 yarn add @react-native-ohos/react-native-spinkit ``` @@ -81,7 +74,17 @@ export default SpinKit; ## Link -目前 HarmonyOS 暂不支持 AutoLink,所以 Link 步骤需要手动配置。 +| | 是否支持autolink | RN框架版本 | +|--------------------------------------|-----------------|------------| +| ~1.6.0 | No | 0.77 | +| ~1.5.2 | Yes | 0.72 | +| <= 1.5.1-0.0.2@deprecated | No | 0.72 | + +使用AutoLink的工程需要根据该文档配置,Autolink框架指导文档:https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +如您使用的版本支持 Autolink,并且工程已接入 Autolink,可跳过ManualLink配置。 +
+ ManualLink: 此步骤为手动配置原生依赖项的指导 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` @@ -108,14 +111,6 @@ export default SpinKit; > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 打开 `entry/oh-package.json5`,添加以下依赖 -- 1.5.1 -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-spinkit": "file:../../node_modules/@react-native-oh-tpl/react-native-spinkit/harmony/spinKit.har" - } -``` -- 1.6.0 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -136,16 +131,73 @@ ohpm install > [!TIP] 如需使用直接链接源码,请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 SpinKitView 组件 +### 3.配置 CMakeLists 和引入 SpinKitPackage + +> 若使用的是 <= 1.5.1-0.0.2 版本,请跳过本章。 + +打开 `entry/src/main/cpp/CMakeLists.txt`,添加: + +```diff +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-spinkit/src/main/cpp" ./spinkit) +# 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_spinkit) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "SpinKitPackage.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 侧引入 SpinKitView 组件 找到 **function buildCustomComponent()**,一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`,添加: ```diff ... - // 1.5.1 -+ import { SpinKitView } from "@react-native-oh-tpl/react-native-spinkit" - - // 1.6.0 + import { SpinKitView } from "@react-native-ohos/react-native-spinkit" @Builder @@ -173,16 +225,12 @@ const arkTsComponentNames: Array = [ + SpinKitView.NAME ]; ``` -### 4.在 ArkTs 侧引入 SpinKitPackage Package +### 5.在 ArkTs 侧引入 SpinKitPackage Package 打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: ```diff ... - // 1.5.1 -+ import { RNSpinKitPackage } from '@react-native-oh-tpl/react-native-spinkit/ts'; - - // 1.6.0 + import { RNSpinKitPackage } from '@react-native-ohos/react-native-spinkit/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -193,7 +241,9 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5.运行 +
+ +## 运行 点击右上角的 `sync` 按钮 @@ -213,8 +263,9 @@ ohpm install 在以下版本验证通过: -1. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0; -2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## 属性 diff --git a/zh-cn/react-native-textinput-maxlength-fixed.md b/zh-cn/react-native-textinput-maxlength-fixed.md index 326856c9..fc456fa2 100644 --- a/zh-cn/react-native-textinput-maxlength-fixed.md +++ b/zh-cn/react-native-textinput-maxlength-fixed.md @@ -13,15 +13,17 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed) -请到三方库相应的 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.2.0 | [@react-native-ohos/react-native-textinput-maxlength-fixed Releases]() | 0.77 | +## 安装与使用 -对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: -## 安装与使用 +| 三方库版本 | 发布信息 | 支持RN版本 | +|---------------------------| ------------------------------------------------------------ | ---------- | +| <= 0.1.2-0.0.1@deprecated | [@react-native-oh-tpl/react-native-textinput-maxlength-fixed Releases(deprecated)](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed/releases) | 0.72 | +| 0.1.4 | [@react-native-ohos/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](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed/releases) | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: @@ -30,18 +32,12 @@ #### **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 ``` @@ -94,13 +90,21 @@ const styles = StyleSheet.create({ ## 使用 Codegen -> [!TIP] V0.2.0 for RN0.77 不需要执行 Codegen。 - 本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link -目前 HarmonyOS 暂不支持 AutoLink,所以 Link 步骤需要手动配置。 +| | 是否支持autolink | RN框架版本 | +|---------------------------|-----------------|------------| +| ~0.2.0 | No | 0.77 | +| ~0.1.4 | Yes | 0.72 | +| <= 0.1.2-0.0.1@deprecated | No | 0.72 | + +使用AutoLink的工程需要根据该文档配置,Autolink框架指导文档:https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +如您使用的版本支持 Autolink,并且工程已接入 Autolink,可跳过ManualLink配置。 +
+ ManualLink: 此步骤为手动配置原生依赖项的指导 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` @@ -118,7 +122,7 @@ const styles = StyleSheet.create({ ### 2.引入原生端代码 > [!TIP] 引入原生代码之前请确认IDE版本,5.0.3.810及其之后的版本需要在harmony工程中的hvigor-config.json5文件中新增如下配置以解决路径过长导致的编译报错问题 > "properties":{ - "ohos.nativeResolver":false +"ohos.nativeResolver":false } 目前有两种方法: @@ -131,17 +135,6 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`,添加以下依赖 -- 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", @@ -155,17 +148,75 @@ const styles = StyleSheet.create({ > [!TIP] 如需使用直接链接源码,请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNTextinputMaxlengthFixedPackage +### 3.配置 CMakeLists 和引入 RNTextinputMaxlengthFixedPackage + +> 若使用的是 <= 0.1.2-0.0.1 版本,请跳过本章。 + +打开 `entry/src/main/cpp/CMakeLists.txt`,添加: + +```diff +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-textinput-maxlength-fixed/src/main/cpp" ./textinput-maxlength-fixed) +# 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_textinput_maxlength_fixed) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "RNTextinputMaxlengthFixedPackage.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 侧引入 RNTextinputMaxlengthFixedPackage 打开 `entry/src/main/ets/rn/RNPackagesFactory.ts`,添加: ```diff 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 { ViewPagerPackage } from '@react-native-ohos/react-native-pager-view/ts'; +import { RNTextinputMaxlengthFixedPackage } from "@react-native-ohos/react-native-textinput-maxlength-fixed/ts"; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -177,14 +228,33 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` +
+ +## 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行: + +```bash +cd entry +ohpm install +``` + + +然后编译、运行即可。 + ## 约束与限制 ### 兼容性 -在以下版本验证通过 +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 + +在以下版本验证通过: -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; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## API -- Gitee