diff --git a/en/react-native-amap3d.md b/en/react-native-amap3d.md index 7e9bc00163af455b60a05da1311562c73619db0f..7aff09160aa0ca4dbe5d407ad7a515e6775482ea 100644 --- a/en/react-native-amap3d.md +++ b/en/react-native-amap3d.md @@ -13,41 +13,33 @@

-This project is based on [react-native-amap3d](https://github.com/qiuxiang/react-native-amap3d). +> [!TIP] [Github address](https://github.com/qiuxiang/react-native-amap3d) + +## Installation and Usage Find the matching version information in the release address of a third-party library: -| Version | Package name | Repository | Release | Support RN version | -|---------|------------------------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|---------------------| -| 3.2.4 | @react-native-oh-tpl/react-native-amap3d | [Github](https://github.com/react-native-oh-library/react-native-amap3d) | [Github Releases](https://github.com/react-native-oh-library/react-native-amap3d/releases) | 0.72 | -| 3.3.0 | @react-native-ohos/react-native-amap3d | [Github](https://github.com/react-native-oh-library/react-native-amap3d) | [Github Releases](https://github.com/react-native-oh-library/react-native-amap3d/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +|----------------------------| ----------------------------------------------------------- | ---------- | +| <= 3.2.5@deprecated | [@react-native-oh-tpl/react-native-amap3d Releases(deprecated)](https://github.com/react-native-oh-library/react-native-amap3d/releases) | 0.72 | +| 3.2.6 | [@react-native-ohos/react-native-amap3d Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-amap3d/releases) | 0.72 | +| 3.3.0 | [@react-native-ohos/react-native-amap3d Releases](https://github.com/react-native-oh-library/react-native-amap3d/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-amap3d - -# 0.77 npm install @react-native-ohos/react-native-amap3d ``` #### **yarn** ```bash -# 0.72 -yarn add @react-native-oh-tpl/react-native-amap3d - -# 0.77 yarn add @react-native-ohos/react-native-amap3d ``` @@ -175,7 +167,9 @@ export default AMapDemo; ## Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +Version >= @react-native-ohos/react-native-amap3d@3.2.6, now supports Autolink without requiring manual configuration, currently only supports 72 frameworks. Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +This step provides guidance for manually configuring native dependencies. Open the `harmony` directory of the HarmonyOS project in DevEco Studio. @@ -201,17 +195,6 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: -- V0.72 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-amap3d": "file:../../node_modules/@react-native-oh-tpl/react-native-amap3d/harmony/rn_amap3d.har" - } -``` - -- V0.77 - ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -234,6 +217,8 @@ Method 2: Directly link to the source code. ### 3. Configuring CMakeLists and Introducing MapViewPackge +> If you are using version <= 3.2.5, please skip this chapter. + Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff @@ -255,10 +240,6 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -# V0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-amap3d/src/main/cpp" ./rn_amap3d) - -# V0.77 + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-amap3d/src/main/cpp" ./rn_amap3d) # RNOH_END: manual_package_linking_1 @@ -276,6 +257,7 @@ target_link_libraries(rnoh_app PUBLIC rnoh) target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) + target_link_libraries(rnoh_app PUBLIC rnoh_amap3d) # RNOH_END: manual_package_linking_2 + ``` Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: @@ -295,30 +277,14 @@ std::vector> PackageProvider::getPackages(Package::Cont + std::make_shared(ctx) }; } -``` - +``` ### 4. Introducing react-native-amap3d Component to ArkTS Find `function buildCustomRNComponent()`, which is usually located in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets`, and add the following code: ```diff -... -// V0.72 -+ import { -+ A_MAP_CIRCLE_VIEW_TYPE, -+ A_MAP_MARKER_TYPE, -+ A_MAP_POLYGON_TYPE, -+ A_MAP_POLYLINE_TYPE, -+ AMapCircle, -+ AMapMarker, -+ AMapPolygon, -+ AMapPolyline, -+ AMapView, -+ GOADE_MAP_VIEW_TYPE -+} from '@react-native-oh-tpl/react-native-amap3d'; -// V0.77 + import { + A_MAP_CIRCLE_VIEW_TYPE, + A_MAP_MARKER_TYPE, @@ -334,7 +300,7 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { -... + + if (ctx.componentName === GOADE_MAP_VIEW_TYPE) { + AMapView({ + ctx: ctx.rnComponentContext, @@ -365,9 +331,7 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) { + tag: ctx.tag, + }) + } -... } -... ``` > [!TIP] If the repository uses a mixed solution, the component name needs to be added. @@ -393,11 +357,7 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co ```diff - ... -// V0.72 -+ import {AMap3DPackage} from '@react-native-oh-tpl/react-native-amap3d/ts'; -// V0.77 + import {AMap3DPackage} from '@react-native-ohos/react-native-amap3d/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -429,8 +389,9 @@ To use this repository, you need to use the correct React-Native and RNOH versio Verified in the following versions. -1. RNOH: 0.72.27; SDK: HarmonyOS 5.1.1 Release SDK; IDE: DevEco Studio 5.1.1 Release; ROM: 5.0.1.120; -2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; 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-bars.md b/en/react-native-bars.md index da1ebc1d7f5001ca600488b26a03ff94c6adc86e..d506ed7897099c012d5684574b26ddc1ca07a463 100644 --- a/en/react-native-bars.md +++ b/en/react-native-bars.md @@ -17,24 +17,30 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-bars Releases](https://github.com/react-native-oh-library/react-native-bars/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +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 | +|-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------| ---------- | +| <= 2.4.3-0.0.3@deprecated | [@react-native-oh-tpl/react-native-bars Releases(deprecated)](https://github.com/react-native-oh-library/react-native-bars/releases) | 0.72 | +| 2.4.4 | [@react-native-ohos/react-native-bars Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bars/releases) | 0.72 | +| 2.5.0 | [@react-native-ohos/react-native-bars Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bars/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-bars +npm install @react-native-ohos/react-native-bars ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-bars +yarn add @react-native-ohos/react-native-bars ``` @@ -70,11 +76,15 @@ export function BarExample() { ## Use Codegen +Version >= @react-native-ohos/react-native-bars@2.4.4, compatible with codegen-lib for generating bridge code. + If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md). ## Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +Version >= @react-native-ohos/react-native-bars@2.4.4 now supports Autolink without requiring manual configuration, currently only supports 72 frameworks. Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +This step provides guidance for manually configuring native dependencies. Open the `harmony` directory of the HarmonyOS project in DevEco Studio. @@ -102,7 +112,7 @@ Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-bars": "file:../../node_modules/@react-native-oh-tpl/react-native-bars/harmony/bars.har" + "@react-native-ohos/react-native-bars": "file:../../node_modules/@react-native-ohos/react-native-bars/harmony/bars.har" } ``` @@ -120,13 +130,68 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Introducing RNBarsPackage to ArkTS +### 3.Configuring CMakeLists and Introducing RNBarsPackage + +> If you are using version <= 2.4.3-0.0.3, 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-bars/src/main/cpp" ./native-bars) +# 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_native-bars) +# RNOH_END: manual_package_linking_2 +``` +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: +```diff +#include "RNOH/PackageProvider.h" ++ #include "RNBarsPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) +{ + return { ++ std::make_shared(ctx) + }; +} +``` +### 4. Introducing RNBarsPackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... -+ import {RNBarsPackage} from '@react-native-oh-tpl/react-native-bars/ts'; ++ import {RNBarsPackage} from '@react-native-ohos/react-native-bars/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -136,7 +201,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 5. Running Click the `sync` button in the upper right corner. @@ -155,7 +220,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-bars Releases](https://github.com/react-native-oh-library/react-native-bars/releases) +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-custom-keyboard.md b/en/react-native-custom-keyboard.md index 71f6e939e4b04e7d24216ef5f43eec7c387bdd81..d62528cd07fd10a49abad41060d5f0d2c6906337 100644 --- a/en/react-native-custom-keyboard.md +++ b/en/react-native-custom-keyboard.md @@ -15,36 +15,29 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-custom-keyboard) +## Installation and Usage + The repository of this third-party library has been migrated to Gitcode and supports direct download from npm. The new package name is: @react-native-ohos/react-native-custom-keyboard. The specific version ownership relationship is as follows: -| Version | Package Name | Repository | Release | Support RN version | -| ---------- | ------------------------------------------------------------ | ---------- | ---------- | ---------- | -| 1.0.3 | @react-native-oh-tpl/react-native-custom-keyboard | [Github](https://github.com/react-native-oh-library/react-native-custom-keyboard)|[Github Releases](https://github.com/react-native-oh-library/react-native-custom-keyboard/releases)|0.72 | -| 1.1.0 | @react-native-ohos/react-native-custom-keyboard | [Gitcode](https://gitcode.com/openharmony-sig/rntpc_react-native-custom-keyboard/tree/br_rnoh0.77) |[Gitcode Releases]() | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +|---------------------------| ------------------------------------------------------------ | ---------- | +| <= 1.0.3-0.0.2@deprecated | [@react-native-oh-tpl/react-native-custom-keyboard Releases(deprecated)](https://github.com/react-native-oh-library/react-native-custom-keyboard/releases) | 0.72 | +| 1.0.4 | [@react-native-ohos/react-native-custom-keyboard Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-custom-keyboard/releases) | 0.72 | +| 1.1.0 | [@react-native-ohos/react-native-custom-keyboard Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-custom-keyboard/releases) | 0.77 | - -## Installation and Usage +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 -# V1.0.3 for RN0.72 -npm install @react-native-oh-tpl/react-native-custom-keyboard - -# V1.1.0 for RN0.77 npm install @react-native-ohos/react-native-custom-keyboard ``` #### **yarn** ```bash -# V1.0.3 for RN0.72 -yarn add @react-native-oh-tpl/react-native-custom-keyboard - -# V1.1.0 for RN0.77 yarn add @react-native-ohos/react-native-custom-keyboard ``` @@ -166,16 +159,19 @@ const styles = StyleSheet.create({ ## Use Codegen -[!TIP] V1.1.0 for RN0.77 does not require Codegen to be executed. +Version >= @react-native-ohos/react-native-custom-keyboard@1.0.4, compatible with codegen-lib for generating bridge code. If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md). ## Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +Version >= @react-native-ohos/react-native-custom-keyboard@1.0.4, now supports Autolink without requiring manual configuration, currently only supports 72 frameworks. Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +This step provides guidance for manually configuring native dependencies. Open the `harmony` directory of the HarmonyOS project in DevEco Studio. + ### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json @@ -200,15 +196,6 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: -+ V1.0.3 for RN0.72 -```json -"dependencies": { - "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-custom-keyboard": "file:../../node_modules/@react-native-oh-tpl/react-native-custom-keyboard/harmony/custom_keyboard.har" - } -``` - -+ V1.1.0 for RN0.77 ```json "dependencies": { "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", @@ -229,7 +216,9 @@ Method 2: Directly link to the source code. For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3.Configuring CMakeLists and Introducing rnoh_custom_keyboard_package Package +### 3.Configuring CMakeLists and Introducing RNCustomKeyboardPackage Package + +> If you are using version <= 1.0.3-0.0.2, please skip this chapter. Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: @@ -251,10 +240,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -# V1.0.3 for RN0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-custom-keyboard/src/main/cpp" ./custom-keyboard) -# V1.1.0 for RN0.77 + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-custom-keyboard/src/main/cpp" ./custom-keyboard) # RNOH_END: manual_package_linking_1 @@ -299,13 +285,9 @@ Open `entry/src/main/ets/RNPackagesFactory.ts` and add the following code: ```diff ... import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts'; -// V1.0.3 for RN0.72 -+import {RNCustomKeyboardPackage} from '@react-native-oh-tpl/react-native-custom-keyboard/ts'; -// V1.1.0 for RN0.77 +import {RNCustomKeyboardPackage} from '@react-native-ohos/react-native-custom-keyboard/ts'; - export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ + new RNCustomKeyboardPackage(ctx) @@ -330,10 +312,13 @@ Then build and run the code. ### Compatibility -The content of this document has been verified based on 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. + +Verified in the following versions. -1、RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.1.1.830; ROM: 6.0.0.112 SP12; -2、RNOH: 0.77.18; SDK: HarmonyOS-5.1.1.208(API19); IDE: DevEco Studio 5.1.1.830; ROM: 6.0.0.112 SP12; +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 (If Any) diff --git a/zh-cn/react-native-amap3d.md b/zh-cn/react-native-amap3d.md index 1ddc33e917713b4f126d08a68f540940e0a3c9fe..121bd4bba93463fe856ca0b0dc66f8a29904ac0f 100644 --- a/zh-cn/react-native-amap3d.md +++ b/zh-cn/react-native-amap3d.md @@ -14,19 +14,20 @@

-本项目基于 [react-native-amap3d](https://github.com/qiuxiang/react-native-amap3d) 开发。 +> [!TIP] [Github address](https://github.com/qiuxiang/react-native-amap3d) + +## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息： -| Version | Package name | Repository | Release | Support RN version | -|---------|------------------------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|---------------------| -| 3.2.4 | @react-native-oh-tpl/react-native-amap3d | [Github](https://github.com/react-native-oh-library/react-native-amap3d) | [Github Releases](https://github.com/react-native-oh-library/react-native-amap3d/releases) | 0.72 | -| 3.3.0 | @react-native-ohos/react-native-amap3d | [Github](https://github.com/react-native-oh-library/react-native-amap3d) | [Github Releases](https://github.com/react-native-oh-library/react-native-amap3d/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持RN版本 | +|---------------------------| ------------------------------------------------------------ | ---------- | +| <= 3.2.5@deprecated | [@react-native-oh-tpl/react-native-amap3d Releases(deprecated)](https://github.com/react-native-oh-library/react-native-amap3d/releases) | 0.72 | +| 3.2.6 | [@react-native-ohos/react-native-amap3d Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-amap3d/releases) | 0.72 | +| 3.3.0 | [@react-native-ohos/react-native-amap3d Releases](https://github.com/react-native-oh-library/react-native-amap3d/releases) | 0.77 | 对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 -## 安装与使用 - 进入到工程目录并输入以下命令： @@ -34,21 +35,12 @@ #### **npm** ```bash -# 0.72 -npm install @react-native-oh-tpl/react-native-amap3d - -# 0.77 npm install @react-native-ohos/react-native-amap3d ``` #### **yarn** ```bash -# 0.72 -yarn add @react-native-oh-tpl/react-native-amap3d - - -# 0.77 yarn add @react-native-ohos/react-native-amap3d ``` @@ -176,7 +168,10 @@ export default AMapDemo; ## Link -目前HarmonyOS暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +Version >= @react-native-ohos/react-native-amap3d@3.2.6，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +此步骤为手动配置原生依赖项的指导。 首先需要使用 DevEco Studio 打开项目里的HarmonyOS工程 `harmony` @@ -204,17 +199,6 @@ export default AMapDemo; 打开 `entry/oh-package.json5`，添加以下依赖 -- V0.72 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-amap3d": "file:../../node_modules/@react-native-oh-tpl/react-native-amap3d/harmony/rn_amap3d.har" - } -``` - -- V0.77 - ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -237,6 +221,8 @@ ohpm install ### 3.配置 CMakeLists 和引入 MapViewPackge +> 若使用的是 <= 3.2.5 版本，请跳过本章。 + 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff @@ -258,10 +244,6 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -# V0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-amap3d/src/main/cpp" ./rn_amap3d) - -# V0.77 + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-amap3d/src/main/cpp" ./rn_amap3d) # RNOH_END: manual_package_linking_1 @@ -307,21 +289,6 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... -// V0.72 -+ import { -+ A_MAP_CIRCLE_VIEW_TYPE, -+ A_MAP_MARKER_TYPE, -+ A_MAP_POLYGON_TYPE, -+ A_MAP_POLYLINE_TYPE, -+ AMapCircle, -+ AMapMarker, -+ AMapPolygon, -+ AMapPolyline, -+ AMapView, -+ GOADE_MAP_VIEW_TYPE -+} from '@react-native-oh-tpl/react-native-amap3d'; - -// V0.77 + import { + A_MAP_CIRCLE_VIEW_TYPE, + A_MAP_MARKER_TYPE, @@ -397,10 +364,6 @@ const arkTsComponentNames: Array = [ ```diff ... -// V0.72 -+ import {AMap3DPackage} from '@react-native-oh-tpl/react-native-amap3d/ts'; - -// V0.77 + import {AMap3DPackage} from '@react-native-ohos/react-native-amap3d/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -428,12 +391,15 @@ ohpm install ### 兼容性 + 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -在以下版本验证通过。 +在以下版本验证通过： + +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; -1. RNOH: 0.72.27; SDK: HarmonyOS 5.1.1 Release SDK; IDE: DevEco Studio 5.1.1 Release; ROM: 5.0.1.120; -2. 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-bars.md b/zh-cn/react-native-bars.md index b93c9857f85244a47a93268247c4951d1659a585..ebec566a54df1c718158bc93d43b54e30a4555ea 100644 --- a/zh-cn/react-native-bars.md +++ b/zh-cn/react-native-bars.md @@ -16,10 +16,17 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-bars) - ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-bars Releases](https://github.com/react-native-oh-library/react-native-bars/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +|---------------------------| ------------------------------------------------------------ | ---------- | +| <= 2.4.3-0.0.3@deprecated | [@react-native-oh-tpl/react-native-bars Releases(deprecated)](https://github.com/react-native-oh-library/react-native-bars/releases) | 0.72 | +| 2.4.4 | [@react-native-ohos/react-native-bars Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bars/releases) | 0.72 | +| 2.5.0 | [@react-native-ohos/react-native-bars Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bars/releases) | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -28,13 +35,13 @@ #### **npm** ```bash -npm install @react-native-oh-tpl/react-native-bars +npm install @react-native-ohos/react-native-bars ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-bars +yarn add @react-native-ohos/react-native-bars ``` @@ -72,9 +79,18 @@ export function BarExample() { ``` + +## 使用 Codegen + +Version >= @react-native-ohos/react-native-bars@2.4.4，已适配codegen-lib生成桥接代码。 + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + ## Link -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Version >= @react-native-ohos/react-native-bars@2.4.4，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +此步骤为手动配置原生依赖项的指导。 首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` @@ -89,10 +105,6 @@ export function BarExample() { } ``` -## 使用 Codegen - -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 - ### 2.引入原生端代码 目前有两种方法： @@ -109,7 +121,7 @@ export function BarExample() { ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-bars": "file:../../node_modules/@react-native-oh-tpl/react-native-bars/harmony/bars.har" + "@react-native-ohos/react-native-bars": "file:../../node_modules/@react-native-ohos/react-native-bars/harmony/bars.har" } ``` @@ -126,14 +138,71 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +### 3.配置 CMakeLists 和引入 RNBarsPackage -### 3.在 ArkTs 侧引入 RNBarsPackage +> 若使用的是 <= 2.4.3-0.0.3 版本，请跳过本章。 + +打开 `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-bars/src/main/cpp" ./native-bars) +# 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_native-bars) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" ++ #include "RNBarsPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) +{ + return { ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 RNBarsPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... -+ import {RNBarsPackage} from '@react-native-oh-tpl/react-native-bars/ts'; ++ import {RNBarsPackage} from '@react-native-ohos/react-native-bars/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -143,7 +212,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -160,7 +229,11 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-bars Releases](https://github.com/react-native-oh-library/react-native-bars/releases) +在以下版本验证通过： + +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-custom-keyboard.md b/zh-cn/react-native-custom-keyboard.md index aa75a37060161123d1f54b43ad16b4496e7412f0..56f878f10424e5839e0e92a41113e0cc3d451135 100644 --- a/zh-cn/react-native-custom-keyboard.md +++ b/zh-cn/react-native-custom-keyboard.md @@ -15,37 +15,29 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-custom-keyboard) -该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-custom-keyboard，具体版本所属关系如下： - +## 安装与使用 -| 三方库版本 | 包名 | 仓库地址 | 发布(Release) | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | ---------- | ---------- | -| 1.0.3 | @react-native-oh-tpl/react-native-custom-keyboard | [Github](https://github.com/react-native-oh-library/react-native-custom-keyboard)|[Github Releases](https://github.com/react-native-oh-library/react-native-custom-keyboard/releases)|0.72 | -| 1.1.0 | @react-native-ohos/react-native-custom-keyboard | [Gitcode](https://gitcode.com/openharmony-sig/rntpc_react-native-custom-keyboard/tree/br_rnoh0.77) |[Gitcode Releases]() | 0.77 | +请到三方库的 Releases 发布地址查看配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +|---------------------------| ------------------------------------------------------------ | ---------- | +| <= 1.0.3-0.0.2@deprecated | [@react-native-oh-tpl/react-native-custom-keyboard Releases(deprecated)](https://github.com/react-native-oh-library/react-native-custom-keyboard/releases) | 0.72 | +| 1.0.4 | [@react-native-ohos/react-native-custom-keyboard Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-custom-keyboard/releases) | 0.72 | +| 1.1.0 | [@react-native-ohos/react-native-custom-keyboard Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-custom-keyboard/releases) | 0.77 | -## 安装与使用 - +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： #### **npm** ```bash -# V1.0.3 for RN0.72 -npm install @react-native-oh-tpl/react-native-custom-keyboard - -# V1.1.0 for RN0.77 npm install @react-native-ohos/react-native-custom-keyboard ``` #### **yarn** ```bash -# V1.0.3 for RN0.72 -yarn add @react-native-oh-tpl/react-native-custom-keyboard - -# V1.1.0 for RN0.77 yarn add @react-native-ohos/react-native-custom-keyboard ``` @@ -165,15 +157,19 @@ const styles = StyleSheet.create({ }); ``` + + ## 使用 Codegen -> [!TIP] V1.1.0 for RN0.77 不需要执行 Codegen。 +Version >= @react-native-ohos/react-native-custom-keyboard@1.0.4，已适配codegen-lib生成桥接代码。 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Version >= @react-native-ohos/react-native-custom-keyboard@1.0.4，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +此步骤为手动配置原生依赖项的指导。 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` @@ -201,15 +197,6 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 -+ V1.0.3 for RN0.72 -```json -"dependencies": { - "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-custom-keyboard": "file:../../node_modules/@react-native-oh-tpl/react-native-custom-keyboard/harmony/custom_keyboard.har" - } -``` - -+ V1.1.0 for RN0.77 ```json "dependencies": { "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", @@ -230,7 +217,9 @@ ohpm install 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.配置 CMakeLists 和引入 rnoh_custom_keyboard_package +### 3.配置 CMakeLists 和引入 RNCustomKeyboardPackage + +> 若使用的是 <= 1.0.3-0.0.2 版本，请跳过本章。 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -253,10 +242,6 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -# V1.0.3 for RN0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-custom-keyboard/src/main/cpp" ./custom-keyboard) - -# V1.1.0 for RN0.77 + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-custom-keyboard/src/main/cpp" ./custom-keyboard) # RNOH_END: manual_package_linking_1 @@ -302,10 +287,7 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts'; -// V1.0.3 for RN0.72 -+import {RNCustomKeyboardPackage} from '@react-native-oh-tpl/react-native-custom-keyboard/ts'; -// V1.1.0 for RN0.77 +import {RNCustomKeyboardPackage} from '@react-native-ohos/react-native-custom-keyboard/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -332,10 +314,14 @@ ohpm install ### 兼容性 -本文档内容基于以下版本验证通过： +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +在以下版本验证通过： + +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; -1、RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.1.1.830; ROM: 6.0.0.112 SP12; -2、RNOH: 0.77.18; SDK: HarmonyOS-5.1.1.208(API19); IDE: DevEco Studio 5.1.1.830; ROM: 6.0.0.112 SP12; ## 属性