diff --git a/en/react-native-date-picker.md b/en/react-native-date-picker.md
index 57a77dbf5d08b7eb9b9a071997aac8203d994393..1df94fd5927e783b6b7fda17643662889d84d2b8 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 9f355c5b66e1c528c5e742ed45e07fa2b01a87c6..1b958abf0d36c618ed83e29268d1e79528a04e69 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 ec1419c6b87237e9bb37a68ac530aba700e738d6..fd3a68b1ae656f97e5efbc8d72677fd011f9bd79 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 d9f594607b8b8195965b8021553f204f1941982b..fac0c2accc3d220a6beb5e35edde346839a39dd1 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 0a5ed01f4daa9c19211ebb02fdf8dbde32d07c67..9079015ec15abf41a1ba87c5fc8c0736cf4b828e 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 7de7933056582e68cbdf025991de405f8d57e154..755ff6bd59ee0e545e0bd2508a84444c940e09ae 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 b0034b53c49ee23ca13c6e278ed8de470816db0b..0510a0f38799458ede1def5dc1014a502b7e9443 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 eac303ca1d285a281527d149f81c39d77ce55285..68936b922d735cf312731a2f8224e4f27fedbddf 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 5b467cbd6a945db1cc201f44bfc74116e4ed0bab..9d2db61c3cbe6d67d655a1d5c20503b686026f8e 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 dd0c6a5a0c271113038ff2262184d4f65dbc8439..16dcaf172853836341781db79b8a97784d9a4839 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 30a6f17da1b111d7e8791bb6c5dbd8b3bf0d92c4..b47c2379e63a8ac9460d0e83b014dc0741780fce 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 326856c980be8f3442c95c4cdea15d9439a838bd..fc456fa209868e23b3cb32ab5f8f45dc37e6735c 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