From 46f9b2efdf201a5d58158339da3c8684223b43c5 Mon Sep 17 00:00:00 2001 From: "haoyuan.chen" Date: Sun, 31 Aug 2025 21:59:49 +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-lightbox.md | 5 +- zh-cn/react-native-material-buttons.md | 26 +++++- zh-cn/react-native-material-textfield.md | 24 +++++- zh-cn/react-native-screenshot-prevent.md | 105 ++++++++++++++++++++++- zh-cn/react-native-shared-element.md | 63 +++++++++++++- zh-cn/react-native-sortable-list.md | 20 ++++- 6 files changed, 227 insertions(+), 16 deletions(-) diff --git a/zh-cn/react-native-lightbox.md b/zh-cn/react-native-lightbox.md index ba675a76..f9e359fd 100644 --- a/zh-cn/react-native-lightbox.md +++ b/zh-cn/react-native-lightbox.md @@ -25,13 +25,13 @@ #### **npm** ```bash -npm install react-native-lightbox-v2@0.9.0 +npm install react-native-lightbox-v2@0.9.2 ``` #### **yarn** ```bash -yarn add react-native-lightbox-v2@0.9.0 +yarn add react-native-lightbox-v2@0.9.2 ``` @@ -179,6 +179,7 @@ const styles = StyleSheet.create({ | **`activeProps`** | 可选属性，在lightbox模式下应用于内容组件， 可用于应用自定义样式或更高分辨率的图源。 | `object` |no |all | yes | | **`renderHeader(close)`** | 自定义header，用于替换默认的 X 按钮| `function` | no |all | yes | | **`renderContent`** | 自定义lightbox内容，用于替换默认的子内容| `function` |no|all | yes | +| **`renderItem(open)`** | 自定义lightbox触发元素，而不是默认的触发元素| `function` |no|all | yes | | **`willClose`** | lightbox关闭前触发 | `function` |no|all | yes | | **`onClose`** | lightbox关闭时触发| `function` |no|all | yes | | **`onOpen`** |lightbox打开时触发| `function` |no|all | yes | diff --git a/zh-cn/react-native-material-buttons.md b/zh-cn/react-native-material-buttons.md index cdbfdddc..75725495 100644 --- a/zh-cn/react-native-material-buttons.md +++ b/zh-cn/react-native-material-buttons.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-material-buttons Releases](https://github.com/react-native-oh-library/react-native-material-buttons/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.6.0 | [@react-native-oh-tpl/react-native-material-buttons Releases](https://github.com/react-native-oh-library/react-native-material-buttons/releases) | 0.72 | +| 0.6.1 | [@react-native-ohos/react-native-material-buttons Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +33,23 @@ #### **npm** ```bash +#v0.6.0 npm install @react-native-oh-tpl/react-native-material-buttons +npm install deprecated-react-native-prop-types +#v0.6.1 +npm install @react-native-ohos/react-native-material-buttons +npm install deprecated-react-native-prop-types ``` #### **yarn** ```bash +#v0.6.0 yarn add @react-native-oh-tpl/react-native-material-buttons +yarn add deprecated-react-native-prop-types +#v0.6.1 +yarn add @react-native-ohos/react-native-material-buttons +yarn add deprecated-react-native-prop-types ``` @@ -205,7 +222,12 @@ export default MaterialButtons; 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-material-buttons Releases](https://github.com/react-native-oh-library/react-native-material-buttons/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.6.0 | [@react-native-oh-tpl/react-native-material-buttons Releases](https://github.com/react-native-oh-library/react-native-material-buttons/releases) | 0.72 | +| 0.6.1 | [@react-native-ohos/react-native-material-buttons Releases]() | 0.77 | ## 属性 diff --git a/zh-cn/react-native-material-textfield.md b/zh-cn/react-native-material-textfield.md index 03b68580..50e9479a 100644 --- a/zh-cn/react-native-material-textfield.md +++ b/zh-cn/react-native-material-textfield.md @@ -17,7 +17,12 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-material-textfield Releases](https://github.com/react-native-oh-library/react-native-material-textfield/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.16.1 | [@react-native-oh-tpl/react-native-material-textfield Releases](https://github.com/react-native-oh-library/react-native-material-textfield/releases) | 0.72 | +| 0.16.2 | [@react-native-ohos/react-native-material-textfield Releases]() | 0.77 | 进入到工程目录并输入以下命令： @@ -26,13 +31,23 @@ #### **npm** ```bash +#v0.16.1 npm install @react-native-oh-tpl/react-native-material-textfield +npm install deprecated-react-native-prop-types +#v0.16.2 +npm install @react-native-ohos/react-native-material-textfield +npm install deprecated-react-native-prop-types ``` #### **yarn** ```bash +#v0.16.1 yarn add @react-native-oh-tpl/react-native-material-textfield +yarn add deprecated-react-native-prop-types +#v0.16.2 +yarn add @react-native-ohos/react-native-material-textfield +yarn add deprecated-react-native-prop-types ``` @@ -201,7 +216,12 @@ const styles = StyleSheet.create({ 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-material-textfield Releases](https://github.com/react-native-oh-library/react-native-material-textfield/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.16.1 | [@react-native-oh-tpl/react-native-material-textfield Releases](https://github.com/react-native-oh-library/react-native-material-textfield/releases) | 0.72 | +| 0.16.2 | [@react-native-ohos/react-native-material-textfield Releases]() | 0.77 | 在下述版本验证通过： diff --git a/zh-cn/react-native-screenshot-prevent.md b/zh-cn/react-native-screenshot-prevent.md index 189e067c..bde52eab 100644 --- a/zh-cn/react-native-screenshot-prevent.md +++ b/zh-cn/react-native-screenshot-prevent.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-screenshot-prevent Releases](https://github.com/react-native-oh-library/react-native-screenshot-prevent/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.2.1 | [@react-native-oh-tpl/react-native-screenshot-prevent Releases](https://github.com/react-native-oh-library/react-native-screenshot-prevent/releases) | 0.72 | +| 1.2.2 | [@react-native-ohos/react-native-screenshot-prevent Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -25,13 +32,21 @@ #### **npm** ```bash +# V1.2.1 npm install @react-native-oh-tpl/react-native-screenshot-prevent + +# V1.2.2 +npm install @react-native-ohos/react-native-screenshot-prevent ``` #### **yarn** ```bash +# V1.2.1 yarn add @react-native-oh-tpl/react-native-screenshot-prevent + +# V1.2.2 +yarn add @react-native-ohos/react-native-screenshot-prevent ``` @@ -98,6 +113,8 @@ useEffect(() => { 打开 `entry/oh-package.json5`，添加以下依赖 +- V1.2.1 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -105,6 +122,15 @@ useEffect(() => { } ``` +- V1.2.2 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-screenshot-prevent": "file:../../node_modules/@react-native-ohos/react-native-screenshot-prevent/harmony/react_native_screenshot_prevent.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -118,14 +144,80 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNScreenShotPreventPackage +### 3.配置 CMakeLists 和引入 ScreenshotPreventPackage + +> [!TIP] 若使用的是 1.2.1 版本，请跳过本章。 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +``` +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-screenshot-prevent/src/main/cpp" ./screenshot-prevent) +# 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_screenshot_prevent) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +``` +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "ScreenshotPreventPackage.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 侧引入 RNScreenShotPreventPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... + +// V1.2.1 + import { RNScreenShotPreventPackage } from "@react-native-oh-tpl/react-native-screenshot-prevent/ts"; +// V1.2.2 ++ import { RNScreenShotPreventPackage } from "@react-native-ohos/react-native-screenshot-prevent/ts"; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -134,7 +226,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -153,7 +245,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-screenshot-prevent Releases](https://github.com/react-native-oh-library/react-native-screenshot-prevent/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.2.1 | [@react-native-oh-tpl/react-native-screenshot-prevent Releases](https://github.com/react-native-oh-library/react-native-screenshot-prevent/releases) | 0.72 | +| 1.2.2 | [@react-native-ohos/react-native-screenshot-prevent Releases]() | 0.77 | ### 权限要求 diff --git a/zh-cn/react-native-shared-element.md b/zh-cn/react-native-shared-element.md index 051587da..0af355ca 100644 --- a/zh-cn/react-native-shared-element.md +++ b/zh-cn/react-native-shared-element.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-shared-element Releases](https://github.com/react-native-oh-library/react-native-shared-element/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.8.9 | [@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 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -25,13 +32,21 @@ #### **npm** ```bash +# V0.8.9 npm install @react-native-oh-tpl/react-native-shared-element + +# V0.9.1 +npm install @react-native-ohos/react-native-shared-element ``` #### **yarn** ```bash +# V0.8.9 yarn add @react-native-oh-tpl/react-native-shared-element + +# V0.9.1 +yarn add @react-native-ohos/react-native-shared-element ``` @@ -237,6 +252,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V0.8.9 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -244,6 +261,15 @@ const styles = StyleSheet.create({ } ``` +- V0.9.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-shared-element": "file:../../node_modules/@react-native-ohos/react-native-shared-element/harmony/shared_element.har" +} +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -279,7 +305,11 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) +# V0.8.9 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-shared-element/src/main/cpp" ./shared-element) + +# V0.9.1 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-shared-element/src/main/cpp" ./shared-element) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -316,7 +346,29 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4.运行 +### 4.在 ArkTs 侧引入 SharedElementPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```ts +import type {RNPackageContext, RNPackage} from 'rnoh/ts'; +import {SamplePackage} from 'rnoh-sample-package/ts'; + +// V0.8.9 ++ import { SharedElementPackage } from '@react-native-oh-tpl/react-native-shared-element'; + +// V0.9.1 ++ import { SharedElementPackage } from '@react-native-ohos/react-native-shared-element'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new SharedElementPackage(ctx) + ]; +} +``` + +### 5.运行 点击右上角的 `sync` 按钮 @@ -335,7 +387,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-shared-element Releases](https://github.com/react-native-oh-library/react-native-shared-element/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.8.9 | [@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 | ## 组件 diff --git a/zh-cn/react-native-sortable-list.md b/zh-cn/react-native-sortable-list.md index 845e7140..faf787d2 100644 --- a/zh-cn/react-native-sortable-list.md +++ b/zh-cn/react-native-sortable-list.md @@ -17,7 +17,12 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-sortabel-list Releases](https://github.com/react-native-oh-library/react-native-sortable-list/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.0.25 | [@react-native-oh-tpl/react-native-sortabel-list Releases](https://github.com/react-native-oh-library/react-native-sortable-list/releases) | 0.72 | +| 0.0.26 | [@react-native-ohos/react-native-sortabel-list Releases]() | 0.77 | 进入到工程目录并输入以下命令： @@ -26,13 +31,19 @@ #### **npm** ```bash +#v0.0.25 npm install @react-native-oh-tpl/react-native-sortable-list +#v0.0.26 +npm install @react-native-ohos/react-native-sortable-list ``` #### **yarn** ```bash +#v0.0.25 yarn add @react-native-oh-tpl/react-native-sortable-list +#v0.0.26 +yarn add @react-native-ohos/react-native-sortable-list ``` @@ -233,9 +244,12 @@ const styles = StyleSheet.create({ 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-sortabel-list Releases](https://github.com/react-native-oh-library/react-native-sortable-list/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： -## 属性 +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.0.25 | [@react-native-oh-tpl/react-native-sortabel-list Releases](https://github.com/react-native-oh-library/react-native-sortable-list/releases) | 0.72 | +| 0.0.26 | [@react-native-ohos/react-native-sortabel-list Releases]() | 0.77 | > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 -- Gitee