From 53200b97c03ae518b4231e126fc0bdc002a1d6a8 Mon Sep 17 00:00:00 2001 From: "haoyuan.chen" Date: Mon, 22 Sep 2025 18:14:24 +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-elements.md | 4 +- zh-cn/react-native-gifted-chat.md | 16 +++ zh-cn/react-native-image-colors.md | 108 ++++++++++++++- zh-cn/react-native-keep-awake.md | 123 +++++++++++++++++- zh-cn/react-native-markdown-renderer.md | 20 ++- zh-cn/react-native-restart.md | 105 ++++++++++++++- zh-cn/react-native-scroll-bottom-sheet.md | 24 +++- .../react-native-textinput-maxlength-fixed.md | 36 ++++- zh-cn/react-native-typography.md | 20 ++- zh-cn/react-native-voice-voice.md | 107 ++++++++++++++- 10 files changed, 535 insertions(+), 28 deletions(-) diff --git a/zh-cn/react-native-elements.md b/zh-cn/react-native-elements.md index 426bab49..b97c0eeb 100644 --- a/zh-cn/react-native-elements.md +++ b/zh-cn/react-native-elements.md @@ -28,14 +28,14 @@ ```bash npm install @rneui/themed@4.0.0-rc.8 -npm install @rneui/base@4.0.0-rc.7 +npm install @rneui/base@4.0.0-rc.8 ``` #### **yarn** ```bash yarn add @rneui/themed@4.0.0-rc.8 -yarn add @rneui/base@4.0.0-rc.7 +yarn add @rneui/base@4.0.0-rc.8 ``` diff --git a/zh-cn/react-native-gifted-chat.md b/zh-cn/react-native-gifted-chat.md index 01a564ef..68f44a3c 100644 --- a/zh-cn/react-native-gifted-chat.md +++ b/zh-cn/react-native-gifted-chat.md @@ -24,13 +24,19 @@ #### **npm** ```bash +#0.72 npm install react-native-gifted-chat@2.4.0 +#0.77 +npm install react-native-gifted-chat@2.8.1 ``` #### **yarn** ```bash +#0.72 yarn add react-native-gifted-chat@2.4.0 +#0.77 +yarn add react-native-gifted-chat@2.8.1 ``` @@ -90,6 +96,12 @@ export function App() { ) } ``` + +Link +本库 HarmonyOS 侧2.8.1版本实现依赖@react-native-ohos/react-native-keyboard-controller的代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参照@react-native-ohos/react-native-keyboard-controller文档(/zh-cn/react-native-keyboard-controller.md)进行引入。 + ## 约束与限制 ### 兼容性 @@ -119,6 +131,7 @@ export function App() { | **alwaysShowSend** | Always show send button in input text composer | Boolean | No | iOS/Android | Yes | | **locale** | Locale to localize the dates. You need first to import the locale you need (ie. `require('dayjs/locale/de')` or `import 'dayjs/locale/fr'`) | *String* | No | iOS/Android | Yes | | **timeFormat** | *(String)* - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format)) | *String* | No | iOS/Android | Yes | +| **dateFormatCalendar**8.1.1+ | Format to use for rendering relative times; Today - for now (see [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar)) | *String* | No | iOS/Android | Yes | | **dateFormat** | Format to use for rendering dates; default is `'ll'` (see [Day.js Format](https://day.js.org/docs/en/display/format)) | *String* | No | iOS/Android | Yes | | **loadEarlier** | Enables the "load earlier messages" button, required for `infiniteScroll` | Boolean | No | iOS/Android | Yes | | **isKeyboardInternallyHandled** | Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true` | Boolean | No | iOS/Android | Yes | @@ -146,6 +159,7 @@ export function App() { | **renderMessageVideo** | Custom message video | *Function* | No | iOS/Android | Yes | | **imageProps** | Extra props to be passed to the [``](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage` | *Object* | No | iOS/Android | Yes | | **videoProps** | Extra props to be passed to the video component created by the required `renderMessageVideo` | *Object* | No | iOS/Android | Yes | +| **imageSourceProps**8.1.1+ | Extra props to be passed to the `MessageImage`'s | *Object* | No | iOS/Android | Yes | | **lightboxProps** | Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox) | *Object* | No | iOS/Android | Yes | | **isCustomViewBottom** | Determine whether renderCustomView is displayed before or after the text, image and video views | Boolean | No | iOS/Android | Yes | | **renderCustomView** | Custom view inside the bubble | *Function* | No | iOS/Android | Yes | @@ -161,6 +175,7 @@ export function App() { | **renderAccessory** | Custom second line of actions below the message composer | *Function* | No | iOS/Android | Yes | | **onPressActionButton** | Callback when the Action button is pressed (if set, the default `actionSheet` will not be used) | *Function* | No | iOS/Android | Yes | | **bottomOffset** | Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar) | Number | No | iOS/Android | No | +| **focusOnInputWhenOpeningKeyboard**8.1.1+ | Focus on automatically when opening the keyboard; default true | Bool | No | iOS/Android | No | | **minInputToolbarHeight** | Minimum height of the input toolbar; default is `44` | Number | No | iOS/Android | No | | **listViewProps** | Extra props to be passed to the messages [``](https://facebook.github.io/react-native/docs/listview.html); some props can't be overridden, see the code in `MessageContainer.render()` for details | *Object* | No | iOS/Android | Yes | | **textInputProps** | Extra props to be passed to the [``](https://facebook.github.io/react-native/docs/textinput.html) | *Object* | No | iOS/Android | Yes | @@ -181,6 +196,7 @@ export function App() { | **onQuickReply** | Callback when sending a quick reply (to backend server) | *Function* | No | iOS/Android | Yes | | **renderQuickReplies** | Custom all quick reply view | *Function* | No | iOS/Android | Yes | | **quickReplyStyle** | Custom quick reply view style | *Object* | No | iOS/Android | Yes | +| **quickReplyContainerStyle**8.1.1+ | Custom quick reply container view style | *Object* | No | iOS/Android | Yes | | **renderQuickReplySend** | Custom quick reply send view | *Function* | No | iOS/Android | Yes | | **shouldUpdateMessage** | Lets the message component know when to update outside of normal cases. | *Function* | No | iOS/Android | Yes | | **infiniteScroll** | infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist (not yet supported for the web). You need to add `loadEarlier` prop too. | *Boolean* | No | iOS/Android | Yes | diff --git a/zh-cn/react-native-image-colors.md b/zh-cn/react-native-image-colors.md index 4282ee5d..352244f8 100644 --- a/zh-cn/react-native-image-colors.md +++ b/zh-cn/react-native-image-colors.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-colors Releases](https://github.com/react-native-oh-library/react-native-image-colors/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.4.0 | [@react-native-oh-tpl/react-native-image-colors Releases](https://github.com/react-native-oh-library/react-native-image-colors/releases) | 0.72 | +| 2.5.1 | [@react-native-ohos/react-native-image-colors Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +33,21 @@ #### **npm** ```bash +# V2.4.0 npm install @react-native-oh-tpl/react-native-image-colors + +# V2.5.1 +npm install @react-native-ohos/react-native-image-colors ``` #### **yarn** ```bash +# V2.4.0 yarn add @react-native-oh-tpl/react-native-image-colors + +# V2.5.1 +yarn add @react-native-ohos/react-native-image-colors ``` @@ -197,6 +212,8 @@ const styles = StyleSheet.create({ ## 使用 Codegen +> [!TIP] V2.5.1 不需要执行Codegen + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -229,6 +246,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V2.4.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -236,6 +255,15 @@ const styles = StyleSheet.create({ } ``` +- V2.5.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-image-colors": "file:../../node_modules/@react-native-ohos/react-native-image-colors/harmony/image_colors.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -249,14 +277,81 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNImageColorsPackage + +### 3.配置CMakeLists 和引入 ImageColorsPackage + +> [!TIP] 若使用的是 2.4.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-image-colors/src/main/cpp" ./image-colors) +# 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_image_colors) +# 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 "ImageColorsPackage.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 侧引入 RNImageColorsPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... +// V2.4.0 + import { RNImageColorsPackage } from "@react-native-oh-tpl/react-native-image-colors/ts"; +// V2.5.1 ++ import { RNImageColorsPackage } from "@react-native-ohos/react-native-image-colors/ts"; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -265,7 +360,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -284,7 +379,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-colors Releases](https://github.com/react-native-oh-library/react-native-image-colors/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.4.0 | [@react-native-oh-tpl/react-native-image-colors Releases](https://github.com/react-native-oh-library/react-native-image-colors/releases) | 0.72 | +| 2.5.1 | [@react-native-ohos/react-native-image-colors Releases]() | 0.77 | ## API diff --git a/zh-cn/react-native-keep-awake.md b/zh-cn/react-native-keep-awake.md index ec2d371e..17bc25bc 100644 --- a/zh-cn/react-native-keep-awake.md +++ b/zh-cn/react-native-keep-awake.md @@ -21,23 +21,37 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-keep-awake Releases](https://github.com/react-native-oh-library/react-native-keep-awake/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： -进入到工程目录并输入以下命令： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.0.0 | [@react-native-oh-tpl/react-native-keep-awake Releases](https://github.com/react-native-oh-library/react-native-keep-awake/releases) | 0.72 | +| 4.0.1 | [@react-native-ohos/react-native-keep-awake Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +进入到工程目录并输入以下命令： #### **npm** ```bash +# V4.0.0 npm install @react-native-oh-tpl/react-native-keep-awake + +# V4.0.1 +npm install @react-native-ohos/react-native-keep-awake ``` #### **yarn** ```bash +# V4.0.0 yarn add @react-native-oh-tpl/react-native-keep-awake + +# V4.0.1 +yarn add @react-native-ohos/react-native-keep-awake ``` @@ -103,6 +117,12 @@ export function KeepAwakeExample() { ``` +## 使用 Codegen + +> [!TIP] V4.0.1 不需要执行Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + ## Link 目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 @@ -133,6 +153,8 @@ export function KeepAwakeExample() { 打开 `entry/oh-package.json5`，添加以下依赖 +- V4.0.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -140,6 +162,15 @@ export function KeepAwakeExample() { } ``` +- V4.0.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-keep-awake": "file:../../node_modules/@react-native-ohos/react-native-keep-awake/harmony/keep_awake.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -155,6 +186,8 @@ ohpm install 打开 `entry/oh-package.json5`，添加以下依赖 +- V4.0.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -162,6 +195,15 @@ ohpm install } ``` +- V4.0.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-keep-awake": "file:../../node_modules/@react-native-ohos/react-native-keep-awake/harmony/keep_awake" + } +``` + 打开终端，执行： ```bash @@ -169,14 +211,80 @@ cd entry ohpm install --no-link ``` -### 3.在 ArkTs 侧引入 RNKeepAwakePackage + +### 3.配置CMakeLists 和引入 KeepAwakePackage + +> [!TIP] 若使用的是 4.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-keep-awake/src/main/cpp" ./keep-awake) +# 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_keep_awake) +# 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 "KeepAwakePackage.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 侧引入 RNKeepAwakePackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... +// V4.0.0 + import { RNKeepAwakePackage } from "@react-native-oh-tpl/react-native-keep-awake/ts"; +// V4.0.1 ++ import { RNKeepAwakePackage } from "@react-native-ohos/react-native-keep-awake/ts"; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -185,7 +293,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -204,7 +312,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-keep-awake Releases](https://github.com/react-native-oh-library/react-native-keep-awake/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.0.0 | [@react-native-oh-tpl/react-native-keep-awake Releases](https://github.com/react-native-oh-library/react-native-keep-awake/releases) | 0.72 | +| 4.0.1 | [@react-native-oh-tpl/react-native-keep-awake Releases]() | 0.77 | 本文档内容基于以下版本验证通过： diff --git a/zh-cn/react-native-markdown-renderer.md b/zh-cn/react-native-markdown-renderer.md index 6ddc441a..07abdc40 100644 --- a/zh-cn/react-native-markdown-renderer.md +++ b/zh-cn/react-native-markdown-renderer.md @@ -16,7 +16,12 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-markdown-renderer Releases](https://github.com/react-native-oh-library/react-native-markdown-renderer/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.2.8 | [@react-native-oh-tpl/react-native-markdown-renderer Releases](https://github.com/react-native-oh-library/react-native-markdown-renderer/releases) | 0.72 | +| 3.2.9 | [@react-native-ohos/react-native-markdown-renderer Releases]() | 0.77 | 进入到工程目录并输入以下命令： @@ -25,13 +30,19 @@ #### **npm** ```bash +#V3.2.8 npm install @react-native-oh-tpl/react-native-markdown-renderer +#V3.2.9 +npm install @react-native-ohos/react-native-markdown-renderer ``` #### **yarn** ```bash +#V3.2.8 yarn add @react-native-oh-tpl/react-native-markdown-renderer +#V3.2.9 +yarn add @react-native-ohos/react-native-markdown-renderer ``` @@ -70,7 +81,12 @@ export default class Page extends PureComponent { 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-markdown-renderer Releases](https://github.com/react-native-oh-library/react-native-markdown-renderer/releases) +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.2.8 | [@react-native-oh-tpl/react-native-markdown-renderer Releases](https://github.com/react-native-oh-library/react-native-markdown-renderer/releases) | 0.72 | +| 3.2.9 | [@react-native-ohos/react-native-markdown-renderer Releases]() | 0.77 | ## Markdown 组件 diff --git a/zh-cn/react-native-restart.md b/zh-cn/react-native-restart.md index 5ca34d54..7de145c5 100644 --- a/zh-cn/react-native-restart.md +++ b/zh-cn/react-native-restart.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-restart Releases](https://github.com/react-native-oh-library/react-native-restart/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.0.27 | [@react-native-oh-tpl/react-native-restart Releases](https://github.com/react-native-oh-library/react-native-restart/releases) | 0.72 | +| 0.0.28 | [@react-native-ohos/react-native-restart Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +33,21 @@ #### **npm** ```bash +# V0.0.27 npm install @react-native-oh-tpl/react-native-restart + +# V0.0.28 +npm install @react-native-ohos/react-native-restart ``` #### **yarn** ```bash +# V0.0.27 yarn add @react-native-oh-tpl/react-native-restart + +# V0.0.28 +yarn add @react-native-ohos/react-native-restart ``` @@ -79,6 +94,8 @@ const styles = StyleSheet.create({ ## 使用 Codegen +> [!TIP] V0.0.28 不需要执行Codegen + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -110,6 +127,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V0.0.27 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -117,6 +136,15 @@ const styles = StyleSheet.create({ } ``` +- V0.0.28 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-restart": "file:../../node_modules/@react-native-ohos/react-native-restart/harmony/rn_restart.har", + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -130,15 +158,81 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNRestartPackage + +### 3.配置CMakeLists 和引入 RestartPackage + +> [!TIP] 若使用的是 0.0.27 版本，请跳过本章 + +打开 `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-restart/src/main/cpp" ./restart) +# 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_restart) +# 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 "RestartPackage.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 侧引入 RNRestartPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff import type { RNPackageContext, RNPackage } from "rnoh/ts"; import { SamplePackage } from "rnoh-sample-package/ts"; +// V0.0.27 + import { RNRestartPackage } from '@react-native-oh-tpl/react-native-restart/ts'; +// V0.0.28 ++ import { RNRestartPackage } from '@react-native-ohos/react-native-restart/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -153,7 +247,12 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-restart Releases](https://github.com/react-native-oh-library/react-native-restart/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.0.27 | [@react-native-oh-tpl/react-native-restart Releases](https://github.com/react-native-oh-library/react-native-restart/releases) | 0.72 | +| 0.0.28 | [@react-native-ohos/react-native-restart Releases]() | 0.77 | ## 静态方法 diff --git a/zh-cn/react-native-scroll-bottom-sheet.md b/zh-cn/react-native-scroll-bottom-sheet.md index 11afdbd6..f737ef4e 100644 --- a/zh-cn/react-native-scroll-bottom-sheet.md +++ b/zh-cn/react-native-scroll-bottom-sheet.md @@ -18,7 +18,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-scroll-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-scroll-bottom-sheet/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.7.0 | [@react-native-oh-library/react-native-scroll-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-scroll-bottom-sheet/releases) | 0.72 | +| 0.7.1 | [@react-native-ohos/react-native-scroll-bottom-sheet Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -27,13 +34,21 @@ #### **npm** ```bash +# V0.7.0 npm install @react-native-oh-tpl/react-native-scroll-bottom-sheet + +# V0.7.1 +npm install @react-native-ohos/react-native-scroll-bottom-sheet ``` #### **yarn** ```bash +# V0.7.0 yarn add @react-native-oh-tpl/react-native-scroll-bottom-sheet + +# V0.7.1 +yarn add @react-native-ohos/react-native-scroll-bottom-sheet ``` @@ -162,7 +177,12 @@ const styles = StyleSheet.create({ 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-scroll-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-scroll-bottom-sheet/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.7.0 | [@react-native-oh-library/react-native-scroll-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-scroll-bottom-sheet/releases) | 0.72 | +| 0.7.1 | [@react-native-ohos/react-native-scroll-bottom-sheet Releases]() | 0.77 | ## 属性 diff --git a/zh-cn/react-native-textinput-maxlength-fixed.md b/zh-cn/react-native-textinput-maxlength-fixed.md index 0bbdd421..ab90c971 100644 --- a/zh-cn/react-native-textinput-maxlength-fixed.md +++ b/zh-cn/react-native-textinput-maxlength-fixed.md @@ -15,7 +15,13 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-textinput-maxlength-fixed Releases](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库相应的 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.1.3 | [@react-native-ohos/react-native-textinput-maxlength-fixed Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -24,13 +30,19 @@ #### **npm** ```bash +# 0.1.2 npm install @react-native-oh-tpl/react-native-textinput-maxlength-fixed +# 0.1.3 +npm install @react-native-ohos/react-native-textinput-maxlength-fixed ``` #### **yarn** ```bash +# 0.1.2 yarn add @react-native-oh-tpl/react-native-textinput-maxlength-fixed +# 0.1.3 +yarn add @react-native-ohos/react-native-textinput-maxlength-fixed ``` @@ -82,6 +94,8 @@ const styles = StyleSheet.create({ ## 使用 Codegen +> [!TIP] V0.1.3 for RN0.77 不需要执行 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -117,12 +131,21 @@ 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.1.3 +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-textinput-maxlength-fixed": "file:../../node_modules/@react-native-ohos/react-native-textinput-maxlength-fixed/harmony/textinput_maxlength_fixed.har" + } +``` 点击右上角的 `sync` 按钮 方法二：直接链接源码 @@ -137,7 +160,10 @@ const styles = StyleSheet.create({ 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.1.3 ++import { RNTextinputMaxlengthFixedPackage } from "@react-native-ohos/react-native-textinput-maxlength-fixed/ts"; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -153,7 +179,13 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-textinput-maxlength-fixed Releases](https://github.com/react-native-oh-library/react-native-textinput-maxlength-fixed/releases) +请到三方库相应的 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.1.3 | [@react-native-ohos/react-native-textinput-maxlength-fixed Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 ## API diff --git a/zh-cn/react-native-typography.md b/zh-cn/react-native-typography.md index 2203e197..1d2972b8 100644 --- a/zh-cn/react-native-typography.md +++ b/zh-cn/react-native-typography.md @@ -16,7 +16,12 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-typography Releases](https://github.com/react-native-oh-library/react-native-typography/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.4.1 | [react-native-oh-tpl/react-native-typography Releases](https://github.com/react-native-oh-library/react-native-typography/releases) | 0.72 | +| 1.4.2 | [@react-native-ohos/react-native-typography Releases]() | 0.77 | 进入到工程目录并输入以下命令： @@ -25,13 +30,19 @@ #### **npm** ```bash +#v1.4.1 npm install @react-native-oh-tpl/react-native-typography +#v1.4.2 +npm install @react-native-ohos/react-native-typography ``` #### **yarn** ```bash +#v1.4.1 yarn add @react-native-oh-tpl/react-native-typography +#v1.4.2 +yarn add @react-native-ohos/react-native-typography ``` @@ -62,7 +73,12 @@ export function TypographyExample1() { 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-typography Releases](https://github.com/react-native-oh-library/react-native-typography/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.4.1 | [react-native-oh-tpl/react-native-typography Releases](https://github.com/react-native-oh-library/react-native-typography/releases) | 0.72 | +| 1.4.2 | [@react-native-ohos/react-native-typography Releases]() | 0.77 | ## 属性 diff --git a/zh-cn/react-native-voice-voice.md b/zh-cn/react-native-voice-voice.md index 49076faf..a67c6827 100644 --- a/zh-cn/react-native-voice-voice.md +++ b/zh-cn/react-native-voice-voice.md @@ -16,24 +16,37 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/voice Releases](https://github.com/react-native-oh-library/voice/releases)。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： -进入到工程目录并输入以下命令： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.2.4 | [@react-native-oh-tpl/voice Releases](https://github.com/react-native-oh-library/voice/releases) | 0.72 | +| 3.2.5 | [@react-native-ohos/voice Releases]() | 0.77 | +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +进入到工程目录并输入以下命令： #### **npm** ```bash +# V3.2.4 npm install @react-native-oh-tpl/voice + +# V3.2.5 +npm install @react-native-ohos/voice ``` #### **yarn** ```bash +# V3.2.4 yarn add @react-native-oh-tpl/voice + +# V3.2.5 +yarn add @react-native-ohos/voice ``` @@ -361,6 +374,8 @@ export default VoiceTest; ``` ## 使用 Codegen +> [!TIP] V3.2.5 不需要执行Codegen + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -393,6 +408,8 @@ export default VoiceTest; 打开 `entry/oh-package.json5`，添加以下依赖 +- V3.2.4 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -400,6 +417,15 @@ export default VoiceTest; } ``` +- V3.2.5 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/voice": "file:../../node_modules/@react-native-ohos/voice/harmony/voice.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -413,15 +439,79 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNVoicePackage +### 3.配置CMakeLists 和引入 VoicePackage + +> [!TIP] 若使用的是 3.2.4 版本，请跳过本章 + +打开 `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/voice/src/main/cpp" ./voice) +# 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_voice) +# 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 "VoicePackage.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 侧引入 RNVoicePackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... - +// V3.2.4 + import { RNVoicePackage } from '@react-native-oh-tpl/voice/ts' +// V3.2.5 ++ import { RNVoicePackage } from '@react-native-ohos/voice/ts' + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -430,7 +520,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -449,7 +539,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/voice Releases](https://github.com/react-native-oh-library/voice/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.2.4 | [@react-native-oh-tpl/voice Releases](https://github.com/react-native-oh-library/voice/releases) | 0.72 | +| 3.2.5 | [@react-native-ohos/voice Releases]() | 0.77 | ### 权限要求 由于此库涉及语音识别会使用到系统录音功能，使用时需要配置对应的权限，权限需配置在entry/src/main目录下module.json5和entry/src/main/resources/base/element目录下string.json文件 -- Gitee