From 05308a5797f65853e32e9bfa78da0c1706b291a4 Mon Sep 17 00:00:00 2001 From: "haoyuan.chen" Date: Fri, 19 Sep 2025 16:17:20 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A00.77=20=E4=B8=89?= =?UTF-8?q?=E6=96=B9=E5=BA=93=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: haoyuan.chen --- zh-cn/react-native-bars.md | 108 +++++++++++++++++++++++++-- zh-cn/react-native-sensitive-info.md | 108 +++++++++++++++++++++++++-- zh-cn/react-native-text-gradient.md | 42 ++++++++++- 3 files changed, 245 insertions(+), 13 deletions(-) diff --git a/zh-cn/react-native-bars.md b/zh-cn/react-native-bars.md index b93c9857..98f9f087 100644 --- a/zh-cn/react-native-bars.md +++ b/zh-cn/react-native-bars.md @@ -19,7 +19,14 @@ ## 安装与使用 -请到三方库的 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 | [@react-native-oh-tpl/react-native-bars Releases](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) | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -28,13 +35,21 @@ #### **npm** ```bash +# V2.4.3 npm install @react-native-oh-tpl/react-native-bars + +# V2.4.4 +npm install @react-native-ohos/react-native-bars ``` #### **yarn** ```bash +# V2.4.3 yarn add @react-native-oh-tpl/react-native-bars + +# V2.4.4 +yarn add @react-native-ohos/react-native-bars ``` @@ -91,6 +106,8 @@ export function BarExample() { ## 使用 Codegen +> [!TIP] V2.4.4 不需要执行Codegen + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ### 2.引入原生端代码 @@ -106,6 +123,8 @@ export function BarExample() { 打开 `entry/oh-package.json5`，添加以下依赖 +- V2.4.3 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -114,6 +133,16 @@ export function BarExample() { } ``` +- V2.4.4 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-bars": "file:../../node_modules/@react-native-ohos/react-native-bars/harmony/bars.har" + + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -127,14 +156,80 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNBarsPackage +### 3.配置CMakeLists 和引入 BarsPackage + +> [!TIP] 若使用的是 2.4.3 版本，请跳过本章 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```cmake +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" ./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_bars) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```c++ +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "BarsPackage.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 侧引入 RNBarsPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... +// V2.4.3 + import {RNBarsPackage} from '@react-native-oh-tpl/react-native-bars/ts'; +// V2.4.4 ++ import {RNBarsPackage} from '@react-native-ohos/react-native-bars/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -143,7 +238,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -160,9 +255,12 @@ 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) - +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.4.3 | [@react-native-oh-tpl/react-native-bars Releases](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) | 0.77 | ## 属性 diff --git a/zh-cn/react-native-sensitive-info.md b/zh-cn/react-native-sensitive-info.md index 4e87e62e..e2984824 100644 --- a/zh-cn/react-native-sensitive-info.md +++ b/zh-cn/react-native-sensitive-info.md @@ -19,7 +19,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-sensitive-info Releases](https://github.com/react-native-oh-library/react-native-sensitive-info/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 6.0.0 | [@react-native-oh-tpl/react-native-sensitive-info Releases](https://github.com/react-native-oh-library/react-native-sensitive-info/releases) | 0.72 | +| 6.0.1 | [@react-native-ohos/react-native-sensitive-info Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -28,13 +35,21 @@ #### **npm** ```bash +# V6.0.0 npm install @react-native-oh-tpl/react-native-sensitive-info + +# V6.0.1 +npm install @react-native-ohos/react-native-sensitive-info ``` #### **yarn** ```bash +# V6.0.0 yarn add @react-native-oh-tpl/react-native-sensitive-info + +# V6.0.1 +yarn add @react-native-ohos/react-native-sensitive-info ``` @@ -124,6 +139,8 @@ export default SensitiveInfoDemo; ## 使用 Codegen +> [!TIP] V6.0.1 不需要执行Codegen + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -156,6 +173,8 @@ export default SensitiveInfoDemo; 打开 `entry/oh-package.json5`，添加以下依赖 +- V6.0.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -163,6 +182,15 @@ export default SensitiveInfoDemo; } ``` +- V6.0.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-sensitive-info": "file:../../node_modules/@react-native-ohos/react-native-sensitive-info/harmony/react_native_sensitive_info.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -177,15 +205,81 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNSensitiveInfoPackage + +### 3.配置CMakeLists 和引入 SensitiveInfoPackage + +> [!TIP] 若使用的是 6.0.0 版本，请跳过本章 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```cmake +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-sensitive-info/src/main/cpp" ./sensitive-info) +# 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_sensitive_info) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```c++ +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "SensitiveInfoPackage.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 侧引入 RNSensitiveInfoPackage 打开 entry/src/main/ets/组件RNPackagesFactory.ts，添加： ```diff ... +// V6.0.0 + import { RNSensitiveInfoPackage } from '@react-native-oh-tpl/react-native-sensitive-info/ts'; +// V6.0.1 ++ import { RNSensitiveInfoPackage } from '@react-native-ohos/react-native-sensitive-info/ts'; + @Builder export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -195,7 +289,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -208,16 +302,18 @@ ohpm install 然后编译、运行即可。 - - ## 约束与限制 ### 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-sensitive-info Releases](https://github.com/react-native-oh-library/react-native-sensitive-info/releases) +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 6.0.0 | [@react-native-oh-tpl/react-native-sensitive-info Releases](https://github.com/react-native-oh-library/react-native-sensitive-info/releases) | 0.72 | +| 6.0.1 | [@react-native-ohos/react-native-sensitive-info Releases]() | 0.77 | ### 权限要求 diff --git a/zh-cn/react-native-text-gradient.md b/zh-cn/react-native-text-gradient.md index 43255872..3918e6ff 100644 --- a/zh-cn/react-native-text-gradient.md +++ b/zh-cn/react-native-text-gradient.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-text-gradient Releases](https://github.com/react-native-oh-library/react-native-text-gradient/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.1.7 | [@react-native-oh-tpl/react-native-text-gradient Releases](https://github.com/react-native-oh-library/react-native-text-gradient/releases) | 0.72 | +| 0.1.8 | [@react-native-ohos/react-native-text-gradient Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -27,13 +34,21 @@ #### **npm** ```bash +#0.1.7 npm install @react-native-oh-tpl/react-native-text-gradient + +#0.1.8 +npm install @react-native-ohos/react-native-text-gradient ``` #### **yarn** ```bash +#0.1.7 yarn add @react-native-oh-tpl/react-native-text-gradient + +#0.1.8 +yarn add @react-native-ohos/react-native-text-gradient ``` @@ -118,6 +133,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V0.1.7 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -125,6 +142,15 @@ const styles = StyleSheet.create({ } ``` +- V0.1.8 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-text-gradient": "file:../../node_modules/@react-native-ohos/react-native-text-gradient/harmony/text_gradient.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -160,7 +186,11 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) +#V0.1.7 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-text-gradient/src/main/cpp" ./text_gradient) + +#V0.1.8 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-text-gradient/src/main/cpp" ./text_gradient) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -203,7 +233,10 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... +//0.1.7 + import {LinearTextGradientPackage} from '@react-native-oh-tpl/react-native-text-gradient/ts'; +//0.1.8 ++ import {LinearTextGradientPackage} from '@react-native-ohos/react-native-text-gradient/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -233,7 +266,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-text-gradient Releases](https://github.com/react-native-oh-library/react-native-text-gradient/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.1.7 | [@react-native-oh-tpl/react-native-text-gradient Releases](https://github.com/react-native-oh-library/react-native-text-gradient/releases) | 0.72 | +| 0.1.8 | [@react-native-ohos/react-native-text-gradient Releases]() | 0.77 | ## 属性 -- Gitee