From 60f1f7d99acfd68f10eb32a86340eb7fb876dff6 Mon Sep 17 00:00:00 2001 From: songzhf Date: Tue, 25 Nov 2025 12:10:43 +0800 Subject: [PATCH 1/9] =?UTF-8?q?docs:=20[Issues:=20#ID8HC4]=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: songzhf --- en/react-countdown-circle-timer.md | 5 + en/react-native-cardview.md | 18 +- en/react-native-create-thumbnail.md | 16 +- en/react-native-marquee.md | 5 +- en/react-native-performance.md | 17 +- en/react-native-signature-canvas.md | 14 + en/react-native-svg-charts.md | 12 +- en/react-native-ui-lib.md | 19 +- zh-cn/react-countdown-circle-timer.md | 42 +- zh-cn/react-native-cardview.md | 51 +- zh-cn/react-native-create-thumbnail.md | 52 +- zh-cn/react-native-marquee.md | 35 +- zh-cn/react-native-performance.md | 14 +- zh-cn/react-native-signature-canvas.md | 130 +- zh-cn/react-native-svg-charts.md | 192 +-- zh-cn/react-native-ui-lib.md | 1886 ++++++++++++------------ 16 files changed, 1308 insertions(+), 1200 deletions(-) diff --git a/en/react-countdown-circle-timer.md b/en/react-countdown-circle-timer.md index ee46d115..87a27e37 100644 --- a/en/react-countdown-circle-timer.md +++ b/en/react-countdown-circle-timer.md @@ -14,6 +14,11 @@ ## Installation and Usage +| Version| Version for RN | +| ---------- | ---------- | +| 3.2.1 | 0.72 | +| 3.2.1 | 0.77 | + #### **npm** diff --git a/en/react-native-cardview.md b/en/react-native-cardview.md index c75a3a46..9fc61680 100644 --- a/en/react-native-cardview.md +++ b/en/react-native-cardview.md @@ -20,20 +20,33 @@ Find the matching version information in the release address of a third-party li Go to the project directory and execute the following instruction: +请到三方库的 Releases 发布地址查看配套的版本信息： +| Third-party library version | Post Information | Supports RN version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.0.3 | [@react-native-oh-tpl/react-native-cardview Releases](https://github.com/react-native-oh-library/react-native-cardview/releases) | 0.72 | +| 2.1.0 | [@react-native-ohos/react-native-cardviewReleases]() | 0.77 | #### **npm** ```bash +#2.0.3 npm install @react-native-oh-tpl/react-native-cardview + +#2.0.4 +npm install @react-native-ohos/react-native-cardview ``` #### **yarn** ```bash +#2.0.3 yarn add @react-native-oh-tpl/react-native-cardview + +#2.0.4 +yarn add @react-native-ohos/react-native-cardview ``` @@ -235,9 +248,8 @@ Then build and run the code. ### Compatibility -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-cardview Releases](https://github.com/react-native-oh-library/react-native-cardview/releases) +1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## Properties diff --git a/en/react-native-create-thumbnail.md b/en/react-native-create-thumbnail.md index e5c99d58..11751cdb 100644 --- a/en/react-native-create-thumbnail.md +++ b/en/react-native-create-thumbnail.md @@ -30,7 +30,10 @@ For older versions not published on npm, please refer to the [Installation Guide Go to the project directory and execute the following instruction: - +| Version | Post Information | Supports RN version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.0.0 | [@react-native-oh-tpl/react-native-create-thumbnail Releases](https://github.com/react-native-oh-library/react-native-create-thumbnail/releases) | 0.72 | +| 2.1.0 | [@react-native-ohos/react-native-create-thumbnail Releases]() | 0.77 | @@ -248,15 +251,10 @@ Then build and run the code. ### Compatibility -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. - -Please refer to the Releases page of the third-party library for the corresponding version information +The content of this document has been validated based on the following version: -| Third-party Library Version | Release Information | Supported RN Version | -|-------| ------------------------------------------------------------ | ---------- | -| 2.0.0@deprecated | [@react-native-oh-tpl/react-native-create-thumbnail Releases(deprecated)](https://github.com/react-native-oh-library/react-native-create-thumbnail/releases) | 0.72 | -| 2.0.1 | [@react-native-ohos/react-native-create-thumbnail Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-create-thumbnail/releases) | 0.72 | -| 2.1.0 | [@react-native-ohos/react-native-create-thumbnail Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-create-thumbnail/releases) | 0.77 | +1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## API diff --git a/en/react-native-marquee.md b/en/react-native-marquee.md index b9f189e0..70d3a3e9 100644 --- a/en/react-native-marquee.md +++ b/en/react-native-marquee.md @@ -74,7 +74,10 @@ const styles = StyleSheet.create({ ### 2.1 Compatibility -Check the release version information in the release address of the third-party library: [@react-native-ohos/react-native-marquee Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee/releases) +The content of this document has been validated based on the following version: + +1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## 3. Properties diff --git a/en/react-native-performance.md b/en/react-native-performance.md index be1e1f39..8825b6b3 100644 --- a/en/react-native-performance.md +++ b/en/react-native-performance.md @@ -29,7 +29,10 @@ For older versions that are not published to npm, please refer to the [installat Go to the project directory and execute the following instruction: - +| Third-party library version | Post Information | Supports RN version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 5.1.2 | [@react-native-oh-tpl/react-native-performance Releases](https://github.com/react-native-oh-library/react-native-performance/releases) | 0.72 | +| 5.2.0 | [@react-native-ohos/react-native-performance Releases]() | 0.77 | @@ -357,16 +360,10 @@ Then build and run the code. ## Constraints ### Compatibility +The content of this document has been validated 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. - -Please refer to the Releases page of the third-party library for the corresponding version information: - -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 5.1.2@deprecated | [@react-native-oh-tpl/react-native-performance Releases(deprecated)](https://github.com/react-native-oh-library/react-native-performance/releases) | 0.72 | -| 5.1.3 | [@react-native-ohos/react-native-performance Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-performance/releases) | 0.72 | -| 5.2.0 | [@react-native-ohos/react-native-performance Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-performance/releases) | 0.77 | +1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## Performance diff --git a/en/react-native-signature-canvas.md b/en/react-native-signature-canvas.md index 7be41606..318a2072 100644 --- a/en/react-native-signature-canvas.md +++ b/en/react-native-signature-canvas.md @@ -15,6 +15,11 @@ > [!TIP] [GitHub address](https://github.com/YanYuanFE/react-native-signature-canvas) +| Version | Version for RN | +| --------------------- | -------------------- | +| 0.72 | 0.72 | +| 0.77 | 0.77 | + ## Installation and Usage @@ -22,13 +27,21 @@ #### **npm** ```bash +#0.72 npm install --save react-native-signature-canvas@4.7.2 + +#0.77 +npm install --save react-native-signature-canvas@5.0.1 ``` #### **yarn** ```bash +#0.72 yarn add react-native-signature-canvas@4.7.2 + +#0.77 +yarn add react-native-signature-canvas@5.0.1 ``` @@ -119,6 +132,7 @@ If it is not included, follow the guide provided in [@react-native-oh-tpl/react- This document is verified based on the following versions: 1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM:3.0.0.25; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## Properties diff --git a/en/react-native-svg-charts.md b/en/react-native-svg-charts.md index e45af844..91083343 100644 --- a/en/react-native-svg-charts.md +++ b/en/react-native-svg-charts.md @@ -22,20 +22,29 @@ Find the matching version information in the release address of a third-party li Go to the project directory and execute the following instruction: - +| Version | Post Information | Supports RN version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 5.3.0 | [https://github.com/react-native-oh-library/react-native-svg-charts Releases](https://github.com/react-native-oh-library/react-native-svg-charts/releases) | 0.72 | +| 5.4.0 | [https://github.com/react-native-ohos/react-native-svg-charts Releases]() | 0.77 | #### **npm** ```bash +#v5.3.0 npm install @react-native-oh-tpl/react-native-svg-charts +#v5.3.1 +npm install @react-native-ohos/react-native-svg-charts ``` #### **yarn** ```bash +#v5.3.0 yarn add @react-native-oh-tpl/react-native-svg-charts +#v5.3.1 +yarn add @react-native-ohos/react-native-svg-charts ``` @@ -497,6 +506,7 @@ If it is not included, follow the guide provided in [@react-native-oh-tpl/react- This document is verified based on the following versions: 1. react-native-harmony: 0.72.26-CAPI; SDK：HarmonyOS NEXT Developer Cannary3 SP2; IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.22(Canary3); +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## Properties diff --git a/en/react-native-ui-lib.md b/en/react-native-ui-lib.md index bc967e8d..16da78a9 100644 --- a/en/react-native-ui-lib.md +++ b/en/react-native-ui-lib.md @@ -14,6 +14,12 @@ Template version: v0.2.2 > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-ui-lib) +| Version | Post Information | Supports RN version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 7.29.1 | [@react-native-oh-tpl/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases) | 0.72 | +| 7.43.1 | [@react-native-ohos/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases) | 0.77 | + + ## Installation and Usage Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/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. @@ -36,13 +42,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# V7.29.1 npm install @react-native-oh-tpl/react-native-ui-lib + +# V7.43.1 +npm install @react-native-ohos/react-native-ui-lib ``` #### **yarn** ```bash +# V7.29.1 yarn add @react-native-oh-tpl/react-native-ui-lib + +# V7.43.1 +yarn add @react-native-ohos/react-native-ui-lib ``` @@ -298,9 +312,10 @@ Then build and run the code. ### Compatibility -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. +The content of this document has been validated based on the following version: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases) +1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## Components diff --git a/zh-cn/react-countdown-circle-timer.md b/zh-cn/react-countdown-circle-timer.md index b88792df..c96e3ffe 100644 --- a/zh-cn/react-countdown-circle-timer.md +++ b/zh-cn/react-countdown-circle-timer.md @@ -13,6 +13,12 @@ > [!TIP] [Github 地址](https://github.com/vydimitrov/react-countdown-circle-timer) ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本| 支持RN版本 | +| ---------- | ---------- | +| 3.2.1 | 0.72 | +| 3.2.1 | 0.77 | @@ -100,25 +106,25 @@ const styles = StyleSheet.create({ > [!TIP] "HarmonyOS Support"列为 Yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | :---------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------: | :------: | :---------: | :---------------: | -| duration | Countdown duration in seconds | number | Yes | Android/iOS | Yes | -| colors | colors prop is either:(Single valid color in any format or URL to a gradient;Array of colors in HEX format. At least 2 colors should be provided) | `string & string[]` | No | Android/iOS | Yes | -| colorsTime | Indicates the time when a color should switch to the next color. The first number is the countdown duration and the last one is 0 or goal. Works only when colors is an array of HEX colors | number[] | No | Android/iOS | Yes | -| isPlaying | Play or pause animation | boolean | No | Android/iOS | Yes | -| initialRemainingTime | Set the initial remaining time if it is different than the duration | number | No | Android/iOS | Yes | -| updateInterval | Update interval in seconds. Determines how often the timer updates. When set to 0 the value will update on each key frame | number | No | Android/iOS | Yes | -| size | Width and height of the SVG element | number | No | Android/iOS | Yes | -| strokeWidth | Path stroke width | number | No | Android/iOS | Yes | -| trailStrokeWidth | Trail stroke width | number | No | Android/iOS | Yes | -| strokeLinecap | Path stroke line cap | `round 、 square 、 butt` | No | Android/iOS | Yes | -| rotation | Progress path rotation direction | `clockwise 、 counterclockwise` | No | Android/iOS | Yes | -| isGrowing | Indicated if the progress path should be growing instead of shrinking | boolean | No | Android/iOS | Yes | -| trailColor | Circle trail color - takes any valid color format | string | No | Android/iOS | Yes | -| isSmoothColorTransition | Indicates if the colors should smoothly transition to the next color | boolean | No | Android/iOS | Yes | -| children | Render function to customize the time/content in the center of the circle | function | No | Android/iOS | Yes | -| onComplete | On animation complete event handler | function | No | Android/iOS | Yes | -| onUpdate | On remaining time update event handler | function | No | Android/iOS | Yes | +| duration | 倒计时持续时间（秒） | number | Yes | Android/iOS | Yes | +| colors | colors 属性可以是：（任意格式的单一有效颜色或渐变的 URL；HEX 格式的颜色数组。至少应提供 2 种颜色） | `string & string[]` | No | Android/iOS | Yes | +| colorsTime | 表示颜色应切换到下一种颜色的时间。第一个数字是倒计时时长，最后一个数字是 0 或目标值。仅在 colors 是 HEX 颜色数组时有效 | number[] | No | Android/iOS | Yes | +| isPlaying | 播放或暂停动画 | boolean | No | Android/iOS | Yes | +| initialRemainingTime | 如果与持续时间不同，请设置初始剩余时间 | number | No | Android/iOS | Yes | +| updateInterval | 更新间隔（秒）。决定计时器更新的频率。设置为0时，数值将在每个关键帧上更新 | number | No | Android/iOS | Yes | +| size | SVG 元素的宽度和高度 | number | No | Android/iOS | Yes | +| strokeWidth | 路径笔画宽度 | number | No | Android/iOS | Yes | +| trailStrokeWidth | 轨迹笔触宽度 | number | No | Android/iOS | Yes | +| strokeLinecap | 路径描边线端点 | `round 、 square 、 butt` | No | Android/iOS | Yes | +| rotation | 进度条旋转方向 | `clockwise 、 counterclockwise` | No | Android/iOS | Yes | +| isGrowing | 指示进度条的路径应该是增长而不是缩小 | boolean | No | Android/iOS | Yes | +| trailColor | 圆圈轨迹颜色 - 可以使用任何有效的颜色格式 | string | No | Android/iOS | Yes | +| isSmoothColorTransition | 指示颜色是否应平滑过渡到下一个颜色 | boolean | No | Android/iOS | Yes | +| children | 渲染函数，用于自定义圆心的时间/内容 | function | No | Android/iOS | Yes | +| onComplete | 在动画完成事件处理程序上 | function | No | Android/iOS | Yes | +| onUpdate | 在剩余时间更新事件处理程序 | function | No | Android/iOS | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-cardview.md b/zh-cn/react-native-cardview.md index e5c3e8d9..41b4da47 100644 --- a/zh-cn/react-native-cardview.md +++ b/zh-cn/react-native-cardview.md @@ -16,20 +16,35 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-cardview Releases](https://github.com/react-native-oh-library/react-native-cardview/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.0.3 | [@react-native-oh-tpl/react-native-cardview Releases](https://github.com/react-native-oh-library/react-native-cardview/releases) | 0.72 | +| 2.1.0 | [@react-native-ohos/react-native-cardviewReleases]() | 0.77 | + + 对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： #### **npm** ```bash +#2.0.3 npm install @react-native-oh-tpl/react-native-cardview + +#2.0.4 +npm install @react-native-ohos/react-native-cardview ``` #### **yarn** ```bash +#2.0.3 yarn add @react-native-oh-tpl/react-native-cardview + +#2.0.4 +yarn add @react-native-ohos/react-native-cardview ``` @@ -137,6 +152,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V2.0.3 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -144,6 +161,15 @@ const styles = StyleSheet.create({ } ``` +- V2.0.4 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-cardview": "file:../../node_modules/@react-native-ohos/react-native-cardview/harmony/card_view.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -179,7 +205,12 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) +# 2.0.3 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-cardview/src/main/cpp" ./card-view) + +# 2.0.4 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-cardview/src/main/cpp" ./card-view) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -232,10 +263,10 @@ ohpm install ## 约束与限制 ### 兼容性 +本文档内容基于以下版本验证通过： -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[react-native-oh-tpl/react-native-cardview Releases](https://github.com/react-native-oh-library/react-native-cardview/releases) +1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## 属性 @@ -245,13 +276,13 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| cornerRadius | An attribute to set the elevation of the card. | number | No | iOS/Android | yes | -| cardElevation | An attribute to support shadow on pre-lollipop device in android. | number | No | iOS/Android | yes | -| cardMaxElevation | An attribute to set the radius of the card. | number | No | Android | yes | -| useCompatPadding | CardView adds additional padding to draw shadows on platforms before Lollipop. | boolean | No | Android | no | -| cornerOverlap | On pre-Lollipop platforms, CardView does not clip the bounds of the Card for the rounded corners. | boolean | No | Android | no | +| cornerRadius | 用于设置卡片高度的属性。 | number | No | iOS/Android | yes | +| cardElevation | 用于在 Android 预 Lollipop 设备上支持阴影的属性 | number | No | iOS/Android | yes | +| cardMaxElevation | 用于设置卡片半径的属性。 | number | No | Android | yes | +| useCompatPadding | CardView 在 Lollipop 之前的平台上会增加额外的内边距以绘制阴影。 | boolean | No | Android | no | +| cornerOverlap | 在 Lollipop 之前的平台上，CardView 不会裁剪卡片圆角的边界。 | boolean | No | Android | no | ## 遗留问题 diff --git a/zh-cn/react-native-create-thumbnail.md b/zh-cn/react-native-create-thumbnail.md index 9b819ae4..600ead71 100644 --- a/zh-cn/react-native-create-thumbnail.md +++ b/zh-cn/react-native-create-thumbnail.md @@ -26,6 +26,7 @@ | 2.0.1 | [@react-native-ohos/react-native-create-thumbnail Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-create-thumbnail/releases) | 0.72 | | 2.1.0 | [@react-native-ohos/react-native-create-thumbnail Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-create-thumbnail/releases) | 0.77 | + 对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -35,12 +36,20 @@ #### **npm** ```bash +# V2.0.0 +npm install @react-native-oh-tpl/react-native-create-thumbnail + +# V2.1.0 npm install @react-native-ohos/react-native-create-thumbnail ``` #### **yarn** ```bash +# V2.0.0 +yarn add @react-native-oh-tpl/react-native-create-thumbnail + +# V2.1.0 yarn add @react-native-ohos/react-native-create-thumbnail ``` @@ -333,15 +342,10 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库的 Releases 发布地址查看配套的版本信息： +本文档内容基于以下版本验证通过： -| 三方库版本 | 发布信息 | 支持RN版本 | -|-------| ------------------------------------------------------------ | ---------- | -| 2.0.0@deprecated | [@react-native-oh-tpl/react-native-create-thumbnail Releases(deprecated)](https://github.com/react-native-oh-library/react-native-create-thumbnail/releases) | 0.72 | -| 2.0.1 | [@react-native-ohos/react-native-create-thumbnail Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-create-thumbnail/releases) | 0.72 | -| 2.1.0 | [@react-native-ohos/react-native-create-thumbnail Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-create-thumbnail/releases) | 0.77 | +1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## API @@ -352,7 +356,7 @@ ohpm install #### **createThumbnail** | Name | Description | Type | Required | HarmonyOS Support | | ---- | ---- | ---- | -------- | -------- | -| createThumbnail | thumbnail generator with storage/cache management and support for both local and remote videos | function | NO | yes | +| createThumbnail | 带存储/缓存管理的缩略图生成器，支持本地和远程视频 | function | NO | yes | ## 属性 @@ -362,16 +366,16 @@ ohpm install | Name | Description | type | Required | Platform | HarmonyOS Support | | :-----------------: | :----------: | :------: | :------: | :---------------: | :---------------: | -| url | Path to video file (local or remote) | String | yes | Android/ios | yes | -| timeStamp | Thumbnail timestamp (in milliseconds) | Number | NO | Android/ios | yes | -| format | Thumbnail format, can be one of: jpeg, or png | String | NO | Android/ios | yes | -| dirSize | Maximum size of the cache directory (in megabytes). When this directory is full, the previously generated thumbnails will be deleted to clear about half of it's size. | Number | NO | Android/ios | yes | -| headers | Headers to load the video with. e.g. { Authorization: 'someAuthToken' } | Object | NO | Android/ios | yes | -| cacheName | Cache name for this thumbnail to avoid duplicate generation. If specified, and a thumbnail already exists with the same cache name, it will be returned instead of generating a new one. | String | NO | Android/ios | yes | -| maxWidth2.0.2+ | Max thumbnail width in px. | Number | NO | Android/ios | yes | -| maxHeight2.0.2+ | Max thumbnail height in px. | Number | NO | Android/ios | yes | -| timeToleranceMs2.0.2+ | Time tolerance in ms for the system to pick the best matching video frame. | Number | NO | ios | NO | -| onlySyncedFrames2.0.2+ | Specify how Android target frames. Use true to retrieve a sync frame that has a timestamp closest to the specified one. Use false to retrieve a frame that may or may not be a sync frame but is closest to the specified timestamp. | Boolean | NO | Android | yes | +| url | 视频文件路径（本地或远程） | String | yes | Android/ios | yes | +| timeStamp | 缩略图时间戳（毫秒） | Number | NO | Android/ios | yes | +| format | 缩略图格式，可以是：jpeg 或 png | String | NO | Android/ios | yes | +| dirSize | 缓存目录的最大大小（以兆字节为单位）。当该目录满时，之前生成的缩略图将被删除，以清理大约一半的空间。 | Number | NO | Android/ios | yes | +| headers | 用于加载视频的请求头。例如：{ Authorization: 'someAuthToken' } | Object | NO | Android/ios | yes | +| cacheName | 此缩略图的缓存名称，用于避免重复生成。如果指定了该名称，并且已经存在具有相同缓存名称的缩略图，将返回该缩略图，而不是生成新的。 | String | NO | Android/ios | yes | +| maxWidth2.0.2+ | 最大缩略图宽度（像素） | Number | NO | Android/ios | yes | +| maxHeight2.0.2+ | 最大缩略图高度（像素） | Number | NO | Android/ios | yes | +| timeToleranceMs2.0.2+ | 系统选择最佳匹配视频帧的时间容差（毫秒）。 | Number | NO | ios | NO | +| onlySyncedFrames2.0.2+ | 指定 Android 的目标帧。使用 true 可检索时间戳最接近指定时间的同步帧。使用 false 可检索最接近指定时间戳的帧，该帧可能是同步帧，也可能不是同步帧。 | Boolean | NO | Android | yes | ## 返回值 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -380,11 +384,11 @@ ohpm install | Name | Description | type | Required | Platform | HarmonyOS Support | | :-----------------: | :----------: | :------: | :------: | :---------------: | :---------------: | -| path | Path to generated thumbnail | String | NO | Android/ios | yes | -| size | Size (in bytes) of thumbnail | Number | NO | Android/ios | yes | -| mime | Mimetype of thumbnail | String | NO | Android/ios | yes | -| width | Thumbnail width | Number | NO | Android/ios | yes | -| height | Thumbnail height | Number | NO | Android/ios | yes | +| path | 生成的Thumbnail路径 | String | NO | Android/ios | yes | +| size | Thumbnail大小（字节） | Number | NO | Android/ios | yes | +| mime | Thumbnail的MIME类型 | String | NO | Android/ios | yes | +| width | Thumbnail宽度 | Number | NO | Android/ios | yes | +| height | Thumbnail高度 | Number | NO | Android/ios | yes | ## 遗留问题 diff --git a/zh-cn/react-native-marquee.md b/zh-cn/react-native-marquee.md index 197bc0c1..adc66f4f 100644 --- a/zh-cn/react-native-marquee.md +++ b/zh-cn/react-native-marquee.md @@ -6,12 +6,13 @@ 本项目基于 [react-native-marquee@0.5.0](https://github.com/kyo504/react-native-marquee/tree/v0.5.0) 开发。 -请到三方库的 Releases 发布地址查看配套的版本信息： +该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-marquee`，具体版本所属关系如下： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.5.0 | [@react-native-oh-tpl/react-native-marquee Releases](https://github.com/react-native-oh-library/react-native-marquee/releases) | 0.72 | -| 0.5.1 | [@react-native-ohos/react-native-marquee Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee/releases) | 0.77 | +| Version | Package Name | Repository | Release | Version for RN | +| ------------------------- | ------------------------------------------------- | ------------------ | -------------------------- | ------------------------- | +| <= 0.5.0-0.0.1@deprecated | @react-native-oh-tpl/react-native-marquee | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-marquee) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-marquee/releases) | 0.72 | +| > 0.5.1 | @react-native-ohos/react-native-marquee | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee/releases) | 0.72 | +| 0.6.0 | @react-native-ohos/react-native-marquee | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee/releases) | 0.77 | ## 1. 安装与使用 @@ -22,20 +23,12 @@ #### **npm** ```bash -# V0.5.0 -npm install @react-native-oh-tpl/react-native-marquee - -# V0.5.1 npm install @react-native-ohos/react-native-marquee ``` #### **yarn** ```bash -# V0.5.0 -yarn add @react-native-oh-tpl/react-native-marquee - -# V0.5.1 yarn add @react-native-ohos/react-native-marquee ``` @@ -81,15 +74,12 @@ const styles = StyleSheet.create({ ### 2.1 兼容性 -请到三方库的 Releases 发布地址查看配套的版本信息： +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.5.0 | [@react-native-oh-tpl/react-native-marquee Releases](https://github.com/react-native-oh-library/react-native-marquee/releases) | 0.72 | -| 0.5.1 | [@react-native-ohos/react-native-marquee Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee/releases) | 0.77 | +本文档内容基于以下版本验证通过： - -## 3. 属性 +1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -110,8 +100,8 @@ const styles = StyleSheet.create({ | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------| --------------- | -------- | -------- | -------- | ----------------- | -| start | Start animation | Function | no | All | yes | -| stop | Stop animation | Function | no | All | yes | +| start | 动画开始 | Function | no | All | yes | +| stop | 动画结束 | Function | no | All | yes | ## 5. 遗留问题 @@ -120,4 +110,3 @@ const styles = StyleSheet.create({ ## 7. 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/kyo504/react-native-marquee/blob/master/LICENSE) ，请自由地享受和参与开源。 - diff --git a/zh-cn/react-native-performance.md b/zh-cn/react-native-performance.md index 1175d92f..e438610c 100644 --- a/zh-cn/react-native-performance.md +++ b/zh-cn/react-native-performance.md @@ -354,16 +354,10 @@ ohpm install ## 约束与限制 ### 兼容性 +本文档内容基于以下版本验证通过： -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库的 Releases 发布地址查看配套的版本信息： - -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 5.1.2@deprecated | [@react-native-oh-tpl/react-native-performance Releases(deprecated)](https://github.com/react-native-oh-library/react-native-performance/releases) | 0.72 | -| 5.1.3 | [@react-native-ohos/react-native-performance Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-performance/releases) | 0.72 | -| 5.2.0 | [@react-native-ohos/react-native-performance Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-performance/releases) | 0.77 | +1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## Performance @@ -373,7 +367,7 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 #### Performance 属性 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | -------- | ----------------| ------------------ | |timeOrigin | 返回Performance用作性能相关时间戳基线的高分辨率时间戳 | number | yes | IOS/Android | yes | #### Performance 方法 diff --git a/zh-cn/react-native-signature-canvas.md b/zh-cn/react-native-signature-canvas.md index 1a1b865a..cd915681 100644 --- a/zh-cn/react-native-signature-canvas.md +++ b/zh-cn/react-native-signature-canvas.md @@ -15,6 +15,12 @@ > [!TIP] [Github 地址](https://github.com/YanYuanFE/react-native-signature-canvas) +| Version | Version for RN | +| --------------------- | -------------------- | +| 0.72 | 0.72 | +| 0.77 | 0.77 | + + ## 安装与使用 @@ -22,13 +28,21 @@ #### **npm** ```bash +#0.72 npm install --save react-native-signature-canvas@4.7.2 + +#0.77 +npm install --save react-native-signature-canvas@5.0.1 ``` #### **yarn** ```bash +#0.72 yarn add react-native-signature-canvas@4.7.2 + +#0.77 +yarn add react-native-signature-canvas@5.0.1 ``` @@ -118,6 +132,7 @@ const styles = StyleSheet.create({ 本文档内容基于以下版本验证通过： 1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM:3.0.0.25; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## 属性 @@ -129,47 +144,51 @@ const styles = StyleSheet.create({ -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | -| autoClear | should auto clear the signature after clicking the Confirm button |boolean| no | iOS/Android | yes | -| backgroundColor | default is "rgba(255,255,255,0)" (transparent), background color of the canvas |string| no | iOS/Android | yes | -| bgHeight | height of the background image |number| no | iOS/Android | yes | -| bgWidth |width of the background image |number| no | iOS/Android | yes | -| bgSrc | background image source uri (url) |string| no | iOS/Android | yes | -| clearText |clear button text|string| no | iOS/Android | yes | -| confirmText |save button text |string| no | iOS/Android | yes | -| customHtml |html string that lets you modify things like the layout or elements |(injectedJavaScript: string) => string| no | iOS/Android | yes | -| dataURL |default is "", Base64 string, draws saved signature from dataURL. |string| no | iOS/Android | yes | -| descriptionText |description text for signature |string| no | iOS/Android | yes | -| dotSize |radius of a single dot (not stroke width) |number| no | iOS/Android | yes | -| imageType |"image/png" (default), "image/jpeg"、"image/svg+xml", imageType of exported signature|string| no | iOS/Android | yes | -| minWidth |minimum width of a line. Defaults to 0.5 |number| no | iOS/Android | yes | -| maxWidth |maximum width of a line. Defaults to 2.5 |number| no | iOS/Android | yes | -| onOK |callback function after saving non-empty signature|function| no | iOS/Android | yes | -| onEmpty |callback function after trying to save an empty signature|function| no | iOS/Android | yes | -| onClear |callback function after clearing the signature|function| no | iOS/Android | yes | -| onGetData |callback function when getData() is called |function| no | iOS/Android | yes | -| onBegin |callback function when a new stroke is started |function| no | iOS/Android | yes | -| onEnd |callback function when the stroke has ended |function| no | iOS/Android | yes | -| onLoadEnd |callback function when the webview canvas load ended |function| no | iOS/Android | yes | -| onUndo |callback function when undo() is called |function| no | iOS/Android | yes | -| onRedo |callback function when redo() is called |function| no | iOS/Android | yes | -| onDraw |callback function when drawing is enabled |function| no | iOS/Android | yes | -| onErase |callback function when erasing is enabled |function| no | iOS/Android | yes | -| onChangePenColor |callback function after changing the pen color|function| no | iOS/Android | yes | -| onChangePenSize |callback function after changing the pen size |function| no | iOS/Android | yes | -| overlayHeight |height of the overlay image |number| no | iOS/Android | yes | -| overlayWidth |width of the overlay image |number| no | iOS/Android | yes | -| overlaySrc |overlay image source uri (url) must be .png with a transparent background |string| no | iOS/Android | yes | -| penColor |default is "black", color of pen|string| no | iOS/Android | yes | -| rotated |rotate signature pad 90 degrees |boolean| no | iOS/Android | yes | -| style |style of wrapper view|object| no | iOS/Android | yes | -| trimWhitespace |trim image whitespace|boolean| no | iOS/Android | yes | -| webStyle |webview style for overwrite default style, all style: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css |string| no | iOS/Android | yes | -| androidLayerType |Sets the android webview layerType |none、software、hardware| no | Android | no | -| androidHardwareAccelerationDisabled |androidHardwareAccelerationDisabled for react-native-webview. Default is false |boolean| no | Android | no | -| showsVerticalScrollIndicator |Boolean value that determines whether a vertical scroll indicator is shown in the WebView, The default value is true.|boolean| no | iOS/Android | no | -| nestedScrollEnabled |enable nested scrolling for use inside of a scrollview|boolean| no | no | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | +| autoClear | 点击确认按钮后应自动清除签名 |boolean| no | iOS/Android | yes | +| backgroundColor | 默认值是 "rgba(255,255,255,0)"（透明），画布的背景颜色 |string| no | iOS/Android | yes | +| bgHeight | 背景图片的高度 |number| no | iOS/Android | yes | +| bgWidth |背景图像的宽度 |number| no | iOS/Android | yes | +| bgSrc | 背景图像来源 URI（网址） |string| no | iOS/Android | yes | +| clearText |清除按钮文字|string| no | iOS/Android | yes | +| confirmText |保存按钮文字 |string| no | iOS/Android | yes | +| customHtml |允许你修改布局或元素的 HTML 字符串 |(injectedJavaScript: string) => string| no | iOS/Android | yes | +| dataURL |默认值为 ""，Base64 字符串，从 dataURL 中加载已保存的签名。 |string| no | iOS/Android | yes | +| descriptionText |签名的描述文字 |string| no | iOS/Android | yes | +| dotSize |单个点的半径（不是笔触宽度） |number| no | iOS/Android | yes | +| imageType |导出签名的 imageType：“image/png”（默认）、“image/jpeg”、“image/svg+xml”|string| no | iOS/Android | yes | +| minWidth |线条最小宽度。默认值为 0.5 |number| no | iOS/Android | yes | +| maxWidth |行的最大宽度。默认值为2.5 |number| no | iOS/Android | yes | +| minDistance5.0.1+ |只有在前一点距离大于 x 像素时才添加下一点。默认值为 5 |number| no | iOS/Android | yes | +| onError5.0.1+ |发生错误时的回调函数 |function| no | iOS/Android | no | +| onOK |保存非空签名后的回调函数|function| no | iOS/Android | yes | +| onEmpty |尝试保存空签名后的回调函数|function| no | iOS/Android | yes | +| onClear |清除签名后的回调函数|function| no | iOS/Android | yes | +| onGetData |当调用 getData() 时的回调函数 |function| no | iOS/Android | yes | +| onBegin |开始新笔画时的回调函数 |function| no | iOS/Android | yes | +| onEnd |当笔画结束时的回调函数 |function| no | iOS/Android | yes | +| onLoadEnd |当 WebView 画布加载完成时的回调函数 |function| no | iOS/Android | yes | +| onUndo |当调用 undo() 时的回调函数 |function| no | iOS/Android | yes | +| onRedo |当调用 redo() 时的回调函数 |function| no | iOS/Android | yes | +| onDraw |启用绘图时的回调函数 |function| no | iOS/Android | yes | +| onErase |启用擦除时的回调函数 |function| no | iOS/Android | yes | +| onChangePenColor |更改画笔颜色后的回调函数|function| no | iOS/Android | yes | +| onChangePenSize |更改画笔大小后的回调函数 |function| no | iOS/Android | yes | +| overlayHeight |覆盖图像的高度 |number| no | iOS/Android | yes | +| overlayWidth |覆盖图像的宽度 |number| no | iOS/Android | yes | +| overlaySrc |覆盖图像源 URI (url) 必须为带有透明背景的 .png |string| no | iOS/Android | yes | +| penColor |默认是“黑色”，笔的颜色|string| no | iOS/Android | yes | +| rotated |将签名板旋转90度 |boolean| no | iOS/Android | yes | +| style |包装视图样式|object| no | iOS/Android | yes | +| scrollable5.0.1+ |在签名板中启用滚动。默认值为 false|boolean| no | iOS/Android | yes | +| trimWhitespace |裁剪图片空白|boolean| no | iOS/Android | yes | +| webStyle |用于覆盖默认样式的 webview 样式，所有样式： https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css |string| no | iOS/Android | yes | +| androidLayerType |设置 Android WebView 的 layerType |none、software、hardware| no | Android | no | +| androidHardwareAccelerationDisabled |react-native-webview 的 androidHardwareAccelerationDisabled。默认值为 false |boolean| no | Android | no | +| showsVerticalScrollIndicator |布尔值，用于决定是否在 WebView 中显示垂直滚动条，默认值为 true.|boolean| no | iOS/Android | no | +| nestedScrollEnabled |启用嵌套滚动以便在滚动视图中使用|boolean| no | no | no | +| webviewProps5.0.1+ |要传递给底层 WebView 的额外属性|object| no | iOS/Android | partially | @@ -183,17 +202,18 @@ const styles = StyleSheet.create({ -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | -| clearSignature |Clear the current signature |function| no | iOS/Android | yes | -| changePenColor |Change pen color |function| no | iOS/Android | yes | -| changePenSize |Change pen size |function| no | iOS/Android | yes | -| draw |Enable drawing signature |function| no | iOS/Android | yes | -| erase |Enable erasing signature |function| no | iOS/Android | yes | -| getData |riggers the onGetData callback with a single data JSON string |function| no | iOS/Android | yes | -| readSignature |Reads the current signature on the canvas and triggers either the onOK or onEmpty callbacks |function| no | iOS/Android | yes | -| undo |Undo last stroke |function| no | iOS/Android | yes | -| redo |Redo last stroke |function| no | iOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | +| clearSignature |清除当前签名 |function| no | iOS/Android | yes | +| changePenColor |更改笔的颜色 |function| no | iOS/Android | yes | +| changePenSize |更改笔的大小 |function| no | iOS/Android | yes | +| draw |启用手写签名 |function| no | iOS/Android | yes | +| erase |启用擦除签名 |function| no | iOS/Android | yes | +| getData |用一个数据 JSON 字符串触发 onGetData 回调 |function| no | iOS/Android | yes | +| readSignature |读取画布上的当前签名，并触发 onOK 或 onEmpty 回调 |function| no | iOS/Android | yes | +| undo |撤销上一步 |function| no | iOS/Android | yes | +| redo |重做上一次笔划 |function| no | iOS/Android | yes | +| fromData5.0.1+ |加载签名数据 |function| no | no | no | @@ -202,11 +222,11 @@ const styles = StyleSheet.create({ ## 其他 - 1、minDistance属性版本问题: 此属性在4.7.3版本生效，npm包最新版本为4.7.2，如需使用，请从[Github](https://github.com/YanYuanFE/react-native-signature-canvas)下载最新代码使用； + 1、nestedScrollEnabled属性在 iOS,Android 不生效，harmonyOS与其表现一致；[issue#363](https://github.com/YanYuanFE/react-native-signature-canvas/issues/363) - 2、nestedScrollEnabled属性在 iOS,Android 不生效，harmonyOS与其表现一致；[issue#363](https://github.com/YanYuanFE/react-native-signature-canvas/issues/363) + 2、fromData方法在 iOS,Android 不生效，harmonyOS与其表现一致；[issue#386](https://github.com/YanYuanFE/react-native-signature-canvas/issues/386) ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-svg-charts.md b/zh-cn/react-native-svg-charts.md index a2f5f5c0..ae0d0631 100644 --- a/zh-cn/react-native-svg-charts.md +++ b/zh-cn/react-native-svg-charts.md @@ -18,7 +18,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[https://github.com/react-native-oh-library/react-native-svg-charts Releases](https://github.com/react-native-oh-library/react-native-svg-charts/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息：[https://github.com/react-native-oh-library/react-native-svg-charts Releases](https://github.com/react-native-oh-library/react-native-svg-charts/releases) 。 + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 5.3.0 | [https://github.com/react-native-oh-library/react-native-svg-charts Releases](https://github.com/react-native-oh-library/react-native-svg-charts/releases) | 0.72 | +| 5.4.0 | [https://github.com/react-native-ohos/react-native-svg-charts Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -27,13 +34,19 @@ #### **npm** ```bash +#v5.3.0 npm install @react-native-oh-tpl/react-native-svg-charts +#v5.3.1 +npm install @react-native-ohos/react-native-svg-charts ``` #### **yarn** ```bash +#v5.3.0 yarn add @react-native-oh-tpl/react-native-svg-charts +#v5.3.1 +yarn add @react-native-ohos/react-native-svg-charts ``` @@ -486,6 +499,7 @@ export default PieChartWithLabelExample 在下述版本验证通过: 1. react-native-harmony: 0.72.26-CAPI; SDK：HarmonyOS NEXT Developer Cannary3 SP2; IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.22(Canary3); +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## 属性 @@ -497,130 +511,130 @@ export default PieChartWithLabelExample > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An array of arbitrary data - use prop xAccessor/yAccessorto tell the chart about the data structure | array | YES | ALL | YES | -yAccessor | A function that takes each entry of data (named "item") as well as the index and returns the y-value of that entry | function | NO | ALL | YES | -xAccessor | Same as yAccessor but returns the x-value of that entry | function | NO | ALL | YES | -yScale | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand ) | d3Scale.scaleLinear | NO | ALL | YES | -xScale | Same as yScale but for the x axis | d3Scale.scaleLinear | NO | ALL | YES | -svg | an object containing all the props that should be passed down to the underlying react-native-svg component. See available props | object | NO | ALL | YES | +| data | 一组任意数据 - 使用属性 xAccessor/yAccessor 告诉图表数据的结构 | array | YES | ALL | YES | +yAccessor | 一个函数，它接收每条数据（称为“item”）以及索引，并返回该条目的 y 值 | function | NO | ALL | YES | +xAccessor | 与 yAccessor 相同，但返回该条目的 x 值 | function | NO | ALL | YES | +yScale | 一个确定所述坐标轴比例的函数（仅在 scaleLinear、scaleTime 和 scaleBand 下测试过） | d3Scale.scaleLinear | NO | ALL | YES | +xScale | 与 y 轴的 yScale 相同，但用于 x 轴 | d3Scale.scaleLinear | NO | ALL | YES | +svg | 一个包含所有应传递到底层 react-native-svg 组件的属性的对象。请参阅可用属性 | object | NO | ALL | YES | animate | PropTypes.bool | boolean | NO | ALL | YES | animationDuration | PropTypes.number | number | NO | ALL | YES | -style | Supports all ViewStyleProps | ViewStyleProps | NO | ALL | YES | -curve | A function like this | d3.curveLinear | NO | ALL | YES | -contentInset | An object that specifies how much fake "margin" to use inside of the SVG canvas. This is particularly helpful on Android where overflow: "visible" isn't supported and might cause clipping. Note: important to have same contentInset on axis's and chart | object | NO | ALL | YES | -numberOfTicks | We use d3-array to evenly distribute the grid and dataPoints on the yAxis. This prop specifies how many "ticks" we should try to render. Note: important that this prop is the same on both the chart and on the yAxis | number/undefined | NO | ALL | YES | -showGrid | Whether or not to show the grid lines | boolean | NO | ALL | YES | -yMin | Alter how the chart bounds are calculated | number/undefined | NO | ALL | YES | -yMax | Alter how the chart bounds are calculated | number/undefined | NO | ALL | YES | -xMin | Alter how the chart bounds are calculated | number/undefined | NO | ALL | YES | -xMax | Alter how the chart bounds are calculated | number/undefined | NO | ALL | YES | -children | One or many react-native-svg components that will be used to enhance your chart | ReactNode | NO | ALL | YES | +style | 支持所有视图样式属性 | ViewStyleProps | NO | ALL | YES | +curve | 设置curve曲线 | d3.curveLinear | NO | ALL | YES | +contentInset | 一个对象，用于指定在 SVG 画布内部使用多少假“边距”。这在 Android 上特别有用，因为 overflow: "visible" 不被支持，可能会导致裁剪。注意：在轴和图表上保持相同的 contentInset 很重要 | object | NO | ALL | YES | +numberOfTicks | 我们使用 d3-array 在 y 轴上均匀分布网格和数据点。这个属性指定了我们应尝试渲染的“刻度”数量。注意：重要的是这个属性在图表和 y 轴上必须相同 | 数字/未定义 | NO | ALL | YES | +showGrid | 是否显示网格线 | boolean | NO | ALL | YES | +yMin | 更改图表边界的计算方式 | number/undefined | NO | ALL | YES | +yMax | 更改图表边界的计算方式 | number/undefined | NO | ALL | YES | +xMin | 更改图表边界的计算方式 | number/undefined | NO | ALL | YES | +xMax | 更改图表边界的计算方式 | number/undefined | NO | ALL | YES | +children | 一个或多个 react-native-svg 组件，将用于增强您的图表 | ReactNode | NO | ALL | YES | ### 属性children -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| x | a function that normally accepts the index of a data point an returns its 'x' location on the canvas | nunmber/string | NO | ALL | YES | -| y | a function that normally accepts the value of a data point an returns its 'y' location on the canvas | nunmber/string | NO | ALL | YES | -| width | the width of the canvas in pixels | number/srting | NO | ALL | YES | -| height | the height of the canvas in pixels | number/srting | NO | ALL | YES | -| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point | array | YES | ALL | YES | -| ticks | if numberOfTicks has been provided to the chart this array will include the calculated tick values (useful for grids) | array | NO | ALL | YES | +| x | 一个通常接受数据点索引并返回其在画布上的 'x' 位置的函数 | nunmber/string | NO | ALL | YES | +| y | 一个函数，通常接受数据点的值并返回其在画布上的“y”位置 | nunmber/string | NO | ALL | YES | +| width | 画布的像素宽度 | number/srting | NO | ALL | YES | +| height | 画布的像素高度 | number/srting | NO | ALL | YES | +| data | 将提供给图表的相同数据数组，如果你想在每个点上添加装饰器，可以使用它来映射你的数据点 | array | YES | ALL | YES | +| ticks | 如果图表提供了 numberOfTicks，则此数组将包含计算出的刻度值（对于网格很有用） | array | NO | ALL | YES | ### 组件特有属性 #### Area -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| start | The value of which the area should start (will always end on the data point) | number/undefined | NO | ALL | YES | +| start | 面积应开始的值（将始终在数据点结束） | number/undefined | NO | ALL | YES | #### StackedAreaChart -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An array of the data entries | array | YES | ALL | YES | -| keys | This array should contain the object keys of interest (see above example) | array | YES | ALL | YES | -| colors | An array of equal size as keys with the color for each key | array | YES | ALL | YES | -| order | The order in which to sort the areas | d3.stackOrderNone | NO | ALL | YES | -| offset | A function to determine the offset of the areas | d3.stackOffsetNone | NO | ALL | YES | +| data | 数据条目的数组 | array | YES | ALL | YES | +| keys | 该数组应包含感兴趣的对象键（参见上面的示例） | array | YES | ALL | YES | +| colors | 一个与键大小相同的数组，用于存放每个键的颜色 | array | YES | ALL | YES | +| order | 排序区域的顺序 | d3.stackOrderNone | NO | ALL | YES | +| offset | 一个用于确定区域偏移的函数 | d3.stackOffsetNone | NO | ALL | YES | #### BarChart -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | The data prop in a barChart can look exactly like in a Line- or AreaChart, i.e an array of just numbers or complex objects. It can however also be an array with several data sets. A data object can contain a svg property which allows you two override styles on that specific object. | array | YES | ALL | YES | -| horizontal | Boolean whether or not the bars should be horizontal | boolean | NO | ALL | YES | -| svg | Default svg props for all bars. Supports all svg props an svg path normally supports. This styles will be overriden if there are specific styles for a given data object | object | NO | ALL | YES | -| spacingInner | Spacing between the bars (or groups of bars) | number/undefined | NO | ALL | YES | -| spacingOuter | Spacing outside of the bars (or groups of bars). Percentage of one bars width | number/undefined | NO | ALL | YES | +| data | barChart 中的 data 属性看起来可以完全像 LineChart 或 AreaChart 中的那样，即一个仅包含数字的数组或复杂对象的数组。然而，它也可以是包含多个数据集的数组。一个数据对象可以包含一个 svg 属性，这允许你覆盖该特定对象的样式。 | array | YES | ALL | YES | +| horizontal | 布尔值，表示条形图是否应为水平 | boolean | NO | ALL | YES | +| svg | 所有柱状图的默认 SVG 属性。支持 SVG 路径通常支持的所有 SVG 属性。如果某个数据对象有特定样式，这些样式将被覆盖。 | object | NO | ALL | YES | +| spacingInner | 条形（或条形组）之间的间距 | number/undefined | NO | ALL | YES | +| spacingOuter | 条形（或条形组）外的间距。相当于一个条形宽度的百分比 | number/undefined | NO | ALL | YES | | contentInset | PropTypes.shape | object | NO | ALL | YES | -| children.bandwidth | the width of a band (a.k.a bar) | number | NO | ALL | YES | +| children.bandwidth | 带（即条形）的宽度 | number | NO | ALL | YES | #### StackedBarChart -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An array of the data entries: each value can be a number or a complex object with custom svg props for example | array | YES | ALL | YES | -| keys | This array should contain the object keys of interest (see above example) | array | YES | ALL | YES | -| colors | An array of equal size as keys with the color for each key | array | YES | ALL | YES | -| valueAccessor | Very similar to the yAccessor of the other charts, usually needed when using complex objects as values | function | NO | ALL | YES | -| horizontal | Boolean whether or not the bars should be horizontal | boolean | NO | ALL | YES | -| order | The order in which to sort the areas | d3.stackOrderNone | NO | ALL | YES | -| offset | A function to determine the offset of the areas | d3.stackOffsetNone | NO | ALL | YES | +| data | 数据条目的数组：每个值可以是一个数字，也可以是带有自定义 SVG 属性的复杂对象，例如 | array | YES | ALL | YES | +| keys | 该数组应包含感兴趣的对象键（参见上面的示例） | array | YES | ALL | YES | +| colors | 一个与键大小相同的数组，用于存放每个键的颜色 | array | YES | ALL | YES | +| valueAccessor | 与其他图表的 yAccessor 非常相似，通常在使用复杂对象作为值时需要 | function | NO | ALL | YES | +| horizontal | 布尔值，表示条形图是否应为水平 | boolean | NO | ALL | YES | +| order | 排序区域的顺序 | d3.stackOrderNone | NO | ALL | YES | +| offset | 一个用于确定区域偏移的函数 | d3.stackOffsetNone | NO | ALL | YES | #### PieChart -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | Very similar to the data prop of our other charts, the only exception is that the PieChart only accepts complex objects (not just numbers). An item can also contain the arc property which allows you two override settings on that specific arc | array | YES | ALL | YES | -| valueAccessor | Very similar to the yAccessor of the other charts | function | NO | ALL | YES | -| outerRadius | The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels) | number/string/undefined | NO | ALL | YES | -| innerRadius | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels) | number/string/undefined | NO | ALL | YES | -| labelRadius | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) | number/string/undefined | NO | ALL | YES | -| padAngle | The angle between the slices | number/undefined | NO | ALL | YES | -| startAngle | The start angle in radians of the entire pie | number/undefined | NO | ALL | YES | -| endAngle | The end angle in radians of the entire pie | number/undefined | NO | ALL | YES | -| sort | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the dataPoints array | function | NO | ALL | YES | -| children.slices | an array of the pie chart slices. See source code and examples for what it includes | array | NO | ALL | YES | +| data | 与我们其他图表的数据属性非常相似，唯一的区别是饼图只接受复杂对象（不仅仅是数字）。一个项目还可以包含 arc 属性，这允许你覆盖该特定弧的设置 | array | YES | ALL | YES | +| valueAccessor | 与其他图表的 yAccessor 非常相似 | function | NO | ALL | YES | +| outerRadius | 外半径，用来调整你的饼图与容器边缘的距离。可以使用百分比或绝对数值（像素） | number/string/undefined | NO | ALL | YES | +| innerRadius | 内半径，用于创建甜甜圈图。可以使用百分比或绝对数值（像素） | number/string/undefined | NO | ALL | YES | +| labelRadius | 用于帮助你布置标签的圆的半径。可以使用百分比或绝对数值（像素） | number/string/undefined | NO | ALL | YES | +| padAngle | 切片之间的角度 | number/undefined | NO | ALL | YES | +| startAngle | 整个饼图的起始角度（弧度） | number/undefined | NO | ALL | YES | +| endAngle | 整个饼图的结束角度（弧度） | number/undefined | NO | ALL | YES | +| sort | 像任何普通的排序函数一样，它期望返回值为 0、正数或负数。参数是来自 dataPoints 数组的每个对象 | function | NO | ALL | YES | +| children.slices | 饼图切片的数组。请参阅源代码和示例以了解其包含内容 | array | NO | ALL | YES | #### ProgressCircle -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| progress | PropTypes.number.isRequired | number | YES | ALL | YES | -| progressColor | PPropTypes.any | string/undefined | NO | ALL | YES | -| backgroundColor | PropTypes.any | string/undefined | NO | ALL | YES | -| startAngle | PropTypes.number | number/undefined | NO | ALL | YES | -| endAngle | PropTypes.number | number/undefined | NO | ALL | YES | -| strokeWidth | PropTypes.number | number/undefined | NO | ALL | YES | -| cornerRadius | PropTypes.number | number/undefined | NO | ALL | YES | +| progress | 进度值 | number | YES | ALL | YES | +| progressColor | 进度条颜色 | string/undefined | NO | ALL | YES | +| backgroundColor | 进度条背景颜色 | string/undefined | NO | ALL | YES | +| startAngle | 开始的角度 | number/undefined | NO | ALL | YES | +| endAngle | 结束的角度 | number/undefined | NO | ALL | YES | +| strokeWidth | 进度条的宽度 | number/undefined | NO | ALL | YES | +| cornerRadius | 圆角的大小 | number/undefined | NO | ALL | YES | #### YAxis -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| scale | Should be the same as passed into the charts yScale, or d3Scale.scaleBand if used in conjunction with a horizontal BarChart | d3Scale.scaleLinear | NO | ALL | YES | -| svg | supports all svg props an svg text normally supports | object | NO | ALL | YES | -| spacingInner | Spacing between the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingInner prop on the actual BarChart | number/undefined | NO | ALL | YES | -| spacingOuter | Spacing outside of the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingOuter prop on the actual BarChart | number/undefined | NO | ALL | YES | -| formatLabel | A utility function to format the text before it is displayed, e.g `value => "$" + value | function|NO | YES | ALL | YES | -| contentInset | Used to sync layout with chart (if same prop used there) | object | NO | ALL | YES | -| min | Used to sync layout with chart (if gridMin is used there) | number/undefined | NO | ALL | YES | -| max | Used to sync layout with chart (if gridMax is used there) | number/undefined | NO | ALL | YES | +| scale | 应该与传入图表的 yScale 相同，或者在与水平条形图一起使用时，与 d3Scale.scaleBand 相同 | d3Scale.scaleLinear | NO | ALL | YES | +| svg | 支持所有 SVG 属性以及 SVG 文本通常支持的属性 | object | NO | ALL | YES | +| spacingInner | 标签之间的间距。仅在 scale=d3Scale.scaleBand 时适用，此时应等于实际 BarChart 上的 spacingInner 属性 | number/undefined | NO | ALL | YES | +| spacingOuter | 标签外的间距。仅在 scale=d3Scale.scaleBand 时适用，并且应等于实际条形图上的 spacingOuter 属性 | number/undefined | NO | ALL | YES | +| formatLabel | 一个用于在文本显示之前进行格式化的实用函数，例如 `value => "$" + value` | function|NO | YES | ALL | YES | +| contentInset | 用于与图表同步布局（如果在那里使用了相同的属性） | object | NO | ALL | YES | +| min | 用于与图表同步布局（如果使用了 gridMin） | number/undefined | NO | ALL | YES | +| max | 用于与图表同步布局（如果使用了 gridMax） | number/undefined | NO | ALL | YES | #### XAxis -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An array of values or objects to render on the xAxis. Should preferably have the same length as the chart's dataPoints. If a complex object is used instead of a simple value, a xAccessor prop is required to calculate the axis' extent. A data object can contain a svg property which allows you to override styles on that specific object | array | YES | ALL | YES | -| scale | Should be the same as passed into the charts xScale | d3Scale.scaleLinear | NO | ALL | YES | -| spacingInner | Spacing between the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingInner prop on the actual BarChart | number/undefined | NO | ALL | YES | -| spacingOuter | Spacing between the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingOuter prop on the actual BarChart | number/undefined | NO | ALL | YES | -| svg | Default svg props for all labels. Supports all svg props an svg text normally supports. This styles will be overriden if there are specific styles for a given data object | object | NO | ALL | YES | -| formatLabel | A utility function to format the text before it is displayed, e.g value => "day" + value. Passes back the value provided by the xAccessor | function | NO | ALL | YES | -| contentInset | Used to sync layout with chart (if same prop used there) | object | NO | ALL | YES | +| data | 要在 x 轴上渲染的一组值或对象。最好与图表的数据点长度相同。如果使用的是复杂对象而不是简单值，则需要 xAccessor 属性来计算轴的范围。数据对象可以包含一个 svg 属性，该属性允许你覆盖该特定对象的样式 | array | YES | ALL | YES | +| scale | 应该与传入图表的 xScale 相同 | d3Scale.scaleLinear | NO | ALL | YES | +| spacingInner | 标签之间的间距。仅在 scale=d3Scale.scaleBand 时适用，此时应等于实际 BarChart 上的 spacingInner 属性 | number/undefined | NO | ALL | YES | +| spacingOuter | 标签之间的间距。仅在 scale=d3Scale.scaleBand 时适用，此时应等于实际 BarChart 上的 spacingOuter 属性 | number/undefined | NO | ALL | YES | +| svg | 所有标签的默认 SVG 属性。支持 SVG 文本通常支持的所有 SVG 属性。如果针对特定数据对象有特定样式，这些样式将被覆盖。 | object | NO | ALL | YES | +| formatLabel | 一个实用函数，用于在显示文本之前进行格式化，例如 value => "day" value。返回 xAccessor 提供的值 | function | NO | ALL | YES | +| contentInset | 用于与图表同步布局（如果在那里使用了相同的属性） | object | NO | ALL | YES | #### Grid -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| svg | an object containing all the props that should be passed down to the underlying react-native-svg component. | object | NO | ALL | YES | -| direction | The direction of the grid lines. | Grid.Direction | NO | ALL | YES | -| belowChart | whether or not to render below the chart. | boolean | NO | ALL | YES | +| svg | 一个包含所有应传递给底层 react-native-svg 组件的属性的对象。 | object | NO | ALL | YES | +| direction | 网格线的方向。 | Grid.Direction | NO | ALL | YES | +| belowChart | 是否在图表下方呈现。 | boolean | NO | ALL | YES | ## 遗留问题 @@ -628,4 +642,4 @@ children | One or many react-native-svg components that will be used to enhance ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/JesperLekland/react-native-svg-charts/blob/dev/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/JesperLekland/react-native-svg-charts/blob/dev/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-ui-lib.md b/zh-cn/react-native-ui-lib.md index 137f39e3..da09e10c 100644 --- a/zh-cn/react-native-ui-lib.md +++ b/zh-cn/react-native-ui-lib.md @@ -337,14 +337,10 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +本文档内容基于以下版本验证通过： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： - -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 7.29.1 | [@react-native-oh-tpl/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases) | 0.72 | -| 7.43.1 | [@react-native-ohos/react-native-ui-lib Releases]() | 0.77 | +1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; ## 组件 @@ -358,1336 +354,1336 @@ ohpm install | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ------------------------------------------------------------ | ----------------------------------- | -------- | ----------- | ----------------- | -| animated | Use Animated.Text as a container | boolean | no | iOS/Android | yes | -| center | Whether to center the text (using textAlign) | boolean | no | iOS/Android | yes | -| color | Color of the text | string | no | iOS/Android | yes | -| highlightString | Substring to highlight. Can be a simple string or a HighlightStringProps object, or an array of the above | HighlightString \|HighlightString[] | no | iOS/Android | yes | -| highlightStyle | Custom highlight style for highlight string | TextStyle | no | iOS/Android | yes | -| recorderTag | Recorder Tag | 'mask' \|'unmask' | no | iOS/Android | yes | -| underline | Whether to add an underline | boolean | no | iOS/Android | yes | -| uppercase | Whether to change the text to uppercase | boolean | no | iOS/Android | yes | +| animated | 将 Animated.Text 用作容器 | boolean | no | iOS/Android | yes | +| center | 是否将文本居中（使用 textAlign） | boolean | no | iOS/Android | yes | +| color | 文字颜色 | string | no | iOS/Android | yes | +| highlightString | 要高亮显示的子字符串。可以是简单的字符串或 HighlightStringProps 对象，或者上述类型的数组 | HighlightString \|HighlightString[] | no | iOS/Android | yes | +| highlightStyle | 自定义强调字符串的高亮样式 | TextStyle | no | iOS/Android | yes | +| recorderTag | 记录器标签 | 'mask' \|'unmask' | no | iOS/Android | yes | +| underline | 是否添加下划线 | boolean | no | iOS/Android | yes | +| uppercase | 是否将文本改为大写 | boolean | no | iOS/Android | yes | **TouchableOpacity**：触摸反馈透明度组件，该组件扩展了[TouchableOpacity](https://reactnative.dev/docs/touchableopacity)属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| activeBackgroundColor | Apply background color on TouchableOpacity when active (press is on) | string | no | iOS/Android | yes | -| backgroundColor | Background color for TouchableOpacity | string | no | iOS/Android | yes | -| customValue | Custom value of any type to pass on to TouchableOpacity and receive back in onPress callback | any | no | iOS/Android | yes | -| onPress | On press callback | (props?: TouchableOpacityProps & {event: GestureResponderEvent} \|any) => void | no | iOS/Android | yes | -| recorderTag | Recorder Tag | 'mask'\|'unmask' | no | iOS/Android | yes | -| style | Custom style | ViewStyle | no | iOS/Android | yes | -| throttleOptions | Throttle options | ThrottleOptions | no | iOS/Android | yes | -| throttleTime | Throttle time in MS for onPress callback | number | no | iOS/Android | yes | -| useNative | Should use an enhanced native implementation with extra features | boolean | no | iOS/Android | yes | -| activeScale | Will apply scale press feedback. This will enforce the useNative prop | number | no | iOS/Android | yes | +| activeBackgroundColor | 当 TouchableOpacity 处于激活状态（按下时）时应用背景颜色 | string | no | iOS/Android | yes | +| backgroundColor | TouchableOpacity 的背景颜色 | string | no | iOS/Android | yes | +| customValue | 可传递给 TouchableOpacity 的任意类型自定义值，并在 onPress 回调中接收 | any | no | iOS/Android | yes | +| onPress | 按下回调 | (props?: TouchableOpacityProps & {event: GestureResponderEvent} \|any) => void | no | iOS/Android | yes | +| recorderTag | 记录器标签 | 'mask'\|'unmask' | no | iOS/Android | yes | +| style | 自定义样式 | ViewStyle | no | iOS/Android | yes | +| throttleOptions | 节流选项 | ThrottleOptions | no | iOS/Android | yes | +| throttleTime | 按下回调的节流时间（毫秒） | number | no | iOS/Android | yes | +| useNative | 应使用具有额外功能的增强本地实现 | boolean | no | iOS/Android | yes | +| activeScale | 将应用缩放按压反馈。这将强制使用 useNative 属性 | number | no | iOS/Android | yes | **View**：容器组件，该组件扩展了[View](https://reactnative.dev/docs/view)属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ------------------------------------------------------------ | ---------------- | -------- | ----------- | ----------------- | -| animated | Use Animate.View as a container | boolean | no | iOS/Android | yes | -| backgroundColor | Set background color | string | no | iOS/Android | yes | -| inaccessible | Turn off accessibility for this view and its nested children | boolean | no | iOS/Android | yes | -| reanimated | Use Animate.View (from react-native-reanimated) as a container | boolean | no | iOS/Android | yes | -| recorderTag | Recorder Tag | 'mask'\|'unmask' | no | iOS/Android | yes | -| renderDelay | Experimental: Pass time in ms to delay render | number | no | iOS/Android | yes | -| style | Custom style | ViewStyle | no | iOS/Android | yes | -| useSafeArea | If true, will render as SafeAreaView | boolean | no | iOS/Android | yes | +| animated | 将 Animate.View 用作容器 | boolean | no | iOS/Android | yes | +| backgroundColor | 设置背景颜色 | string | no | iOS/Android | yes | +| inaccessible | 关闭此视图及其子视图的辅助功能 | boolean | no | iOS/Android | yes | +| reanimated | 使用 Animate.View（来自 react-native-reanimated）作为容器 | boolean | no | iOS/Android | yes | +| recorderTag | 记录器标签 | 'mask'\|'unmask' | no | iOS/Android | yes | +| renderDelay | 实验性：以毫秒为单位传递时间以延迟渲染 | number | no | iOS/Android | yes | +| style | 自定义样式 | ViewStyle | no | iOS/Android | yes | +| useSafeArea | 如果为true，将呈现为 SafeAreaView | boolean | no | iOS/Android | yes | **ActionBar**：快速操作栏，每个操作都支持按钮组件道具，该组件扩展了[View](https://wix.github.io/react-native-ui-lib/docs/components/basic/View)属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ------------------------------------------------------------ | ------------- | -------- | ----------- | ----------------- | -| actions | The actions for the action bar | ButtonProps[] | no | iOS/Android | yes | -| backgroundColor | Background color | string | no | iOS/Android | yes | -| centered | Should action be equally centered | boolean | no | iOS/Android | yes | -| height | Height | number | no | iOS/Android | yes | -| keepRelative | Keep the action bar position relative instead of it absolute position | boolean | no | iOS/Android | yes | -| style | Component's style | ViewStyle | no | iOS/Android | yes | -| useSafeArea | In iOS, use safe area, in case component attached to the bottom | boolean | no | iOS/Android | yes | +| actions | 操作栏的操作 | ButtonProps[] | no | iOS/Android | yes | +| backgroundColor | 设置背景颜色 | string | no | iOS/Android | yes | +| centered | 行动是否应同样居中 | boolean | no | iOS/Android | yes | +| height | 高度 | number | no | iOS/Android | yes | +| keepRelative | 保持操作栏位置为相对，而不是绝对位置 | boolean | no | iOS/Android | yes | +| style | 组件的样式 | ViewStyle | no | iOS/Android | yes | +| useSafeArea | 在 iOS 中，使用安全区域，以防组件附着到底部 | boolean | no | iOS/Android | yes | **Button**：按钮组件，该组件扩展了[TouchableOpacity](https://wix.github.io/react-native-ui-lib/docs/components/basic/TouchableOpacity)属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :----------------------- | ------------------------------------------------------------ | ----------------------------------------------- | -------- | ----------- | ----------------- | -| animateLayout | should animate layout change. Note: For Android you must set ' setLayoutAnimationEnabledExperimental (true) ' via RN's 'UIManager' | boolean | no | iOS/Android | yes | -| animateTo | the direction of the animation ('left' and 'right' will effect the button's own alignment) | ButtonAnimationDirection | no | iOS/Android | yes | -| avoidInnerPadding | avoid inner button padding | boolean | no | iOS/Android | yes | -| avoidMinWidth | avoid minimum width constraints | boolean | no | iOS/Android | yes | -| backgroundColor | Color of the button background | string | no | iOS/Android | yes | -| borderRadius | Custom border radius. | number | no | iOS/Android | yes | -| color | The Button text color (inherited from Text component) | string | no | iOS/Android | yes | -| disabled | Disable interactions for the component | boolean | no | iOS/Android | yes | -| disabledBackgroundColor | Color of the disabled button background | string | no | iOS/Android | yes | -| enableShadow | Control shadow visibility (iOS-only) | boolean | no | iOS | no | -| fullWidth | should the button act as a coast to coast button (no border radius) | boolean | no | iOS/Android | yes | -| getActiveBackgroundColor | callback for getting activeBackgroundColor (e.g. (calculatedBackgroundColor, prop) => {...}). Better set using ThemeManager | (backgroundColor: string, props: any) => string | no | iOS/Android | yes | -| hyperlink | Button will look like a hyperlink | boolean | no | iOS/Android | yes | -| iconOnRight | Should the icon be right to the label | boolean | no | iOS/Android | yes | -| iconProps | Icon image props | Partial | no | iOS/Android | yes | -| iconSource | Icon image source or a callback function that returns a source | ImageProps['source']\|Function | no | iOS/Android | yes | -| iconStyle | Icon image style | ImageStyle | no | iOS/Android | yes | -| label | Text to show inside the button | string | no | iOS/Android | yes | -| labelProps | Props that will be passed to the button's Text label. | TextProps | no | iOS/Android | yes | -| labelStyle | Additional styles for label text | TextStyle | no | iOS/Android | yes | -| link | Button will look like a link | boolean | no | iOS/Android | yes | -| linkColor | label color for when it's displayed as link or hyperlink | string | no | iOS/Android | yes | -| onPress | Actions handler | (props: any) => void | no | iOS/Android | yes | -| outline | Button will have outline style | boolean | no | iOS/Android | yes | -| outlineColor | The outline color | string | no | iOS/Android | yes | -| outlineWidth | The outline width | number | no | iOS/Android | yes | -| round | should the button be a round button | boolean | no | iOS/Android | yes | -| size | Size of the button [large, medium, small, xSmall] | ButtonSize | no | iOS/Android | yes | -| supportRTL | whether the icon should flip horizontally on RTL locals | boolean | no | iOS/Android | yes | +| animateLayout | 应该为布局变化添加动画。注意：对于 Android，必须通过 RN 的 'UIManager' 设置 'setLayoutAnimationEnabledExperimental(true)' | boolean | no | iOS/Android | yes | +| animateTo | 动画的方向（“左”和“右”会影响按钮自身的对齐方式） | ButtonAnimationDirection | no | iOS/Android | yes | +| avoidInnerPadding | 避免内部按钮间距 | boolean | no | iOS/Android | yes | +| avoidMinWidth | 避免最小宽度限制 | boolean | no | iOS/Android | yes | +| backgroundColor | 按钮背景颜色 | string | no | iOS/Android | yes | +| borderRadius | 自定义边角半径。 | number | no | iOS/Android | yes | +| color | 按钮文本颜色（继承自文本组件） | string | no | iOS/Android | yes | +| disabled | 禁用组件的交互 | boolean | no | iOS/Android | yes | +| disabledBackgroundColor | 禁用按钮背景颜色 | string | no | iOS/Android | yes | +| enableShadow | 控制阴影可见性（仅限 iOS） | boolean | no | iOS | no | +| fullWidth | 按钮是否应作为跨屏按钮（无边角圆弧） | boolean | no | iOS/Android | yes | +| getActiveBackgroundColor | 用于获取 activeBackgroundColor 的回调（例如 (calculatedBackgroundColor, prop) => {...}）。最好通过 ThemeManager 设置 | (backgroundColor: string, props: any) => string | no | iOS/Android | yes | +| hyperlink | 按钮看起来像一个超链接 | boolean | no | iOS/Android | yes | +| iconOnRight | 图标应该在标签的右边吗 | boolean | no | iOS/Android | yes | +| iconProps | 图标图片属性 | Partial | no | iOS/Android | yes | +| iconSource | 图标图像来源或返回来源的回调函数 | ImageProps['source']|Function | no | iOS/Android | yes | +| iconStyle |图标图片样式 | ImageStyle | no | iOS/Android | yes | +| label | 按钮内显示的文本 | string | no | iOS/Android | yes | +| labelProps | 将传递给按钮文本标签的属性。 | TextProps | no | iOS/Android | yes | +| labelStyle | 标签文本的附加样式 | TextStyle | no | iOS/Android | yes | +| link | 按钮看起来像一个链接 | boolean | no | iOS/Android | yes | +| linkColor | 标签颜色（当显示为链接或超链接时） | string | no | iOS/Android | yes | +| onPress | 动作处理器 | (props: any) => void | no | iOS/Android | yes | +| outline | 按钮将采用轮廓样式 | boolean | no | iOS/Android | yes | +| outlineColor | 轮廓颜色 | string | no | iOS/Android | yes | +| outlineWidth | 轮廓宽度 | number | no | iOS/Android | yes | +| round | 按钮是否是圆形按钮 | boolean | no | iOS/Android | yes | +| size | 按钮的大小 [large, medium, small, xSmall] | ButtonSize | no | iOS/Android | yes | +| supportRTL | 图标在 RTL 语言环境下是否应水平翻转 | boolean | no | iOS/Android | yes | **Checkbox**：复选框组件，该组件扩展了[TouchableOpacity](https://wix.github.io/react-native-ui-lib/docs/components/basic/TouchableOpacity)属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ------------------------------------------------------------ | -------------------------- | -------- | ----------- | ----------------- | -| borderRadius | The Checkbox border radius | number | no | iOS/Android | yes | -| color | The Checkbox color | string | no | iOS/Android | yes | -| containerStyle | Custom styling for the checkbox and label container | ViewStyle | no | iOS/Android | yes | -| disabled | Whether the checkbox should be disabled | boolean | no | iOS/Android | yes | -| iconColor | The selected icon color | string | no | iOS/Android | yes | -| label | Add a label to the Checkbox | string | no | iOS/Android | yes | -| labelProps | Props to pass on to the label component | TextProps | no | iOS/Android | yes | -| labelStyle | Pass to style the label | TextStyle | no | iOS/Android | yes | -| onChangeValidity | Callback for when field validity has changed | (isValid: boolean) => void | no | iOS/Android | yes | -| onValueChange | Callback function for value change event | (value) => void | no | iOS/Android | yes | -| outline | Alternative Checkbox outline style | boolean | no | iOS/Android | yes | -| required | Whether the checkbox is required | boolean | no | iOS/Android | yes | -| selectedIcon | The icon asset to use for the selected indication | ImageRequireSource | no | iOS/Android | yes | -| size | The Checkbox size, affect both width and height | number | no | iOS/Android | yes | -| style | Custom styling for the Checkbox | ViewStyle | no | iOS/Android | yes | -| value | The Checkbox value. If true the switch will be turned on. Default value is false | boolean | no | iOS/Android | yes | +| borderRadius | 复选框边框圆角 | number | no | iOS/Android | yes | +| color | 复选框颜色 | string | no | iOS/Android | yes | +| containerStyle | 复选框和标签容器的自定义样式 | ViewStyle | no | iOS/Android | yes | +| disabled | 复选框是否应被禁用 | boolean | no | iOS/Android | yes | +| iconColor | 所选图标颜色 | string | no | iOS/Android | yes | +| label | 为复选框添加标签 | string | no | iOS/Android | yes | +| labelProps | 传递给标签组件的属性 | TextProps | no | iOS/Android | yes | +| labelStyle | 传递以设置标签样式 | TextStyle | no | iOS/Android | yes | +| onChangeValidity | 字段有效性更改时的回调 | (isValid: boolean) => void | no | iOS/Android | yes | +| onValueChange | 值变化事件的回调函数 | (value) => void | no | iOS/Android | yes | +| outline | 替代复选框轮廓样式 | boolean | no | iOS/Android | yes | +| required | 是否需要复选框 | boolean | no | iOS/Android | yes | +| selectedIcon | 用于所选指示的图标资源 | ImageRequireSource | no | iOS/Android | yes | +| size | 复选框的大小会影响宽度和高度 | number | no | iOS/Android | yes | +| style | 复选框的自定义样式 | ViewStyle | no | iOS/Android | yes | +| value | 复选框的值。如果为真，开关将被打开。默认值为假 | boolean | no | iOS/Android | yes | **Chip**：芯片组件，该组件扩展了[TouchableOpacity](https://wix.github.io/react-native-ui-lib/docs/components/basic/TouchableOpacity)，[View](https://wix.github.io/react-native-ui-lib/docs/components/basic/View)属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- | ----------- | ----------------- | -| avatarProps | Avatar props object | AvatarProps | no | iOS/Android | yes | -| backgroundColor | Background color | string | no | iOS/Android | yes | -| badgeProps | Badge props object | BadgeProps | no | iOS/Android | yes | -| borderRadius | Border radius | number | no | iOS/Android | yes | -| containerStyle | Component's container style | ViewStyle | no | iOS/Android | yes | -| dismissColor | Dismiss color | string | no | iOS/Android | yes | -| dismissContainerStyle | Dismiss container style | ImageStyle | no | iOS/Android | yes | -| dismissIcon | Dismiss asset | ImageSourcePropType | no | iOS/Android | yes | -| dismissIconStyle | Dismiss style | ImageStyle | no | iOS/Android | yes | -| iconProps | Additional icon props | Omit | no | iOS/Android | yes | -| iconSource | Left icon's source | ImageSourcePropType | no | iOS/Android | yes | -| iconStyle | Icon style | ImageStyle | no | iOS/Android | yes | -| label | Main Chip text | string | no | iOS/Android | yes | -| labelStyle | Label's style | TextStyle | no | iOS/Android | yes | -| leftElement | Left custom element | JSX.Element | no | iOS/Android | yes | -| onDismiss | Adds a dismiss button and serves as its callback | (props: any) => void | no | iOS/Android | yes | -| onPress | On Chip press callback | (props: any) => void | no | iOS/Android | yes | -| resetSpacings | Disables all internal elements default spacings. Helps reach a custom design | boolean | no | iOS/Android | yes | -| rightElement | Right custom element | JSX.Element | no | iOS/Android | yes | -| rightIconSource | Right icon's source | ImageSourcePropType | no | iOS/Android | yes | -| size | Chip's size. Number or a width and height object | number\|{{width: number, height: number}} | no | iOS/Android | yes | -| testID | The test id for e2e tests | string | no | iOS/Android | yes | -| useCounter | Display badge as counter (no background) | boolean | no | iOS/Android | yes | -| useSizeAsMinimum | Uses size as minWidth and minHeight | boolean | no | iOS/Android | yes | +| avatarProps | Avatar 属性 | AvatarProps | no | iOS/Android | yes | +| backgroundColor | 背景色 | string | no | iOS/Android | yes | +| badgeProps | Badge 属性 | BadgeProps | no | iOS/Android | yes | +| borderRadius | Border半径 | number | no | iOS/Android | yes | +| containerStyle | Component's container 风格 | ViewStyle | no | iOS/Android | yes | +| dismissColor | Dismiss 颜色 | string | no | iOS/Android | yes | +| dismissContainerStyle | Dismiss container 风格 | ImageStyle | no | iOS/Android | yes | +| dismissIcon | Dismiss 资源 | ImageSourcePropType | no | iOS/Android | yes | +| dismissIconStyle | Dismiss 风格 | ImageStyle | no | iOS/Android | yes | +| iconProps | Additional icon 属性 | Omit | no | iOS/Android | yes | +| iconSource | Left icon's 资源 | ImageSourcePropType | no | iOS/Android | yes | +| iconStyle | Icon 风格 | ImageStyle | no | iOS/Android | yes | +| label | 显式的文本 | string | no | iOS/Android | yes | +| labelStyle | Label的风格 | TextStyle | no | iOS/Android | yes | +| leftElement | 左边自定义元素 | JSX.Element | no | iOS/Android | yes | +| onDismiss | 添加一个关闭按钮并作为其回调 | (props: any) => void | no | iOS/Android | yes | +| onPress | 芯片按下回调 | (props: any) => void | no | iOS/Android | yes | +| resetSpacings | 禁用所有内部元素的默认间距，有助于实现自定义设计 | boolean | no | iOS/Android | yes | +| rightElement | 右边自定义元素 | JSX.Element | no | iOS/Android | yes | +| rightIconSource | 右边图标地址 | ImageSourcePropType | no | iOS/Android | yes | +| size | 芯片的尺寸。数字或宽度和高度对象 | number\|{{width: number, height: number}} | no | iOS/Android | yes | +| testID | 端到端测试的测试 ID | string | no | iOS/Android | yes | +| useCounter | 以计数器显示徽章（无背景） | boolean | no | iOS/Android | yes | +| useSizeAsMinimum | 使用大小作为最小宽度和最小高度 | boolean | no | iOS/Android | yes | **RadioButton**：单选按钮组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | ------------------------------------------------------------ | --------------------------- | -------- | ----------- | ----------------- | -| borderRadius | The radio button border radius | number | no | iOS/Android | yes | -| color | The color of the radio button | string | no | iOS/Android | yes | -| containerStyle | Additional styling for the container | ViewStyle | no | iOS/Android | yes | -| contentOnLeft | Should the content be rendered left to the button | boolean | no | iOS/Android | yes | -| disabled | Whether the radio button should be disabled | boolean | no | iOS/Android | yes | -| iconOnRight | Should the icon be on the right side of the label | boolean | no | iOS/Android | yes | -| iconSource | Icon image source | ImageSource | no | iOS/Android | yes | -| iconStyle | Icon image style | ImageStyle | no | iOS/Android | yes | -| label | A label for the radio button description | string | no | iOS/Android | yes | -| labelStyle | Label style | TextStyle | no | iOS/Android | yes | -| onPress | Invoked when pressing the button | (selected: boolean) => void | no | iOS/Android | yes | -| selected | When using RadioButton without a RadioGroup, use this prop to toggle selection | boolean | no | iOS/Android | yes | -| size | The size of the radio button, affect both width & height | number | no | iOS/Android | yes | -| value | The identifier value of the radio button. must be different than other RadioButtons in the same group | string \| number \| boolean | no | iOS/Android | yes | +| borderRadius | 单选按钮边框半径 | number | no | iOS/Android | yes | +| color | 单选按钮的颜色 | string | no | iOS/Android | yes | +| containerStyle | 容器的附加样式 | ViewStyle | no | iOS/Android | yes | +| contentOnLeft | 内容应该左对齐到按钮吗 | boolean | no | iOS/Android | yes | +| disabled | 是否应禁用单选按钮 | boolean | no | iOS/Android | yes | +| iconOnRight | 图标应该放在标签的右侧吗 | boolean | no | iOS/Android | yes | +| iconSource | 图标图片来源 | ImageSource | no | iOS/Android | yes | +| iconStyle | 图标图片样式 | ImageStyle | no | iOS/Android | yes | +| label | 单选按钮描述的标签 | string | no | iOS/Android | yes | +| labelStyle | 标签样式 | TextStyle | no | iOS/Android | yes | +| onPress | 在按下按钮时调用 | (selected: boolean) => void | no | iOS/Android | yes | +| selected | 在不使用 RadioGroup 的情况下使用 RadioButton 时，使用此属性来切换选中状态 | boolean | no | iOS/Android | yes | +| size | 单选按钮的大小影响宽度和高度 | number | no | iOS/Android | yes | +| value | 单选按钮的标识值。必须与同一组中的其他单选按钮不同 | string \| number \| boolean | no | iOS/Android | yes | **RadioGroup**：包裹单选按钮组件，和RadioButton配合使用。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| initialValue | The initial value of the selected radio button | string \| number \| boolean | no | iOS/Android | yes | -| onValueChange | Invoked once when value changes, by selecting one of the radio buttons in the group | ((value?: string) => void)\|((value?: number) => void)\|((value?: boolean) => void)\|((value?: any) => void) | no | iOS/Android | yes | +| initialValue | 所选单选按钮的初始值 | string \| number \| boolean | no | iOS/Android | yes | +| onValueChange | 当值改变时调用一次，通过选择组中的一个单选按钮 | ((value?: string) => void)\|((value?: number) => void)\|((value?: boolean) => void)\|((value?: any) => void) | no | iOS/Android | yes | **Slider**：滑块组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------ | ------------------------------------ | -------- | ----------- | ----------------- | -| accessible | If true the component will have accessibility features enabled | boolean | no | iOS/Android | yes | -| activeThumbStyle | The active (during press) thumb style | ViewStyle | no | iOS/Android | yes | -| containerStyle | The container style | ViewStyle | no | iOS/Android | yes | -| disableActiveStyling | If true the Slider will not change it's style on press | boolean | no | iOS/Android | yes | -| disableRTL | If true the Slider will stay in LTR mode even if the app is on RTL mode | boolean | no | iOS/Android | yes | -| disabled | If true the Slider will be disabled and will appear in disabled color | boolean | no | iOS/Android | yes | -| initialMaximumValue | Only when `useRange` is true, Initial maximum value | number | no | iOS/Android | yes | -| initialMinimumValue | Only when `useRange` is true, Initial minimum value | number | no | iOS/Android | yes | -| maximumTrackTintColor | The track color | string | no | iOS/Android | yes | -| maximumValue | Track maximum value | number | no | iOS/Android | yes | -| migrate | Temporary prop required for migration to the Slider's new implementation | boolean | no | iOS/Android | yes | -| minimumTrackTintColor | The color used for the track from minimum value to current value | string | no | iOS/Android | yes | -| minimumValue | Track minimum value | number | no | iOS/Android | yes | -| onRangeChange | Callback for onRangeChange. Returns values object with the min and max values | SliderOnRangeChange | no | iOS/Android | yes | -| onReset | Callback that notifies when the reset function was invoked | () => void | no | iOS/Android | yes | -| onSeekEnd | Callback that notifies about slider seeking is finished | () => void | no | iOS/Android | yes | -| onSeekStart | Callback that notifies about slider seeking is started | () => void | no | iOS/Android | yes | -| onValueChange | Callback for onValueChange | SliderOnValueChange | no | iOS/Android | yes | -| renderTrack | Custom render instead of rendering the track | () => ReactElement \| ReactElement[] | no | iOS/Android | yes | -| step | Step value of the slider. The value should be between 0 and (maximumValue - minimumValue) | number | no | iOS/Android | yes | -| testID | The component test id | string | no | iOS/Android | yes | -| thumbStyle | The thumb style | ViewStyle | no | iOS/Android | yes | -| thumbTintColor | Thumb color | string | no | iOS/Android | yes | -| trackStyle | The track style | ViewStyle | no | iOS/Android | yes | -| useGap | If true the min and max thumbs will not overlap | boolean | no | iOS/Android | yes | -| useRange | If true the Slider will display a second thumb for the min value | boolean | no | iOS/Android | yes | -| value | Initial value | number | no | iOS/Android | yes | +| accessible | 如果为真，该组件将启用辅助功能 | boolean | no | iOS/Android | yes | +| activeThumbStyle | 按压时的样式 | ViewStyle | no | iOS/Android | yes | +| containerStyle | 容器样式 | ViewStyle | no | iOS/Android | yes | +| disableActiveStyling | 如果为真，滑块在按下时不会改变其样式 | boolean | no | iOS/Android | yes | +| disableRTL | 如果为true，即使应用程序处于从右到左模式，滑块仍将保持从左到右模式 | boolean | no | iOS/Android | yes | +| disabled | 如果为true，滑块将被禁用，并显示为禁用颜色 | boolean | no | iOS/Android | yes | +| initialMaximumValue | 只有当 `useRange` 为 true 时，初始最大值 | number | no | iOS/Android | yes | +| initialMinimumValue | 只有当 `useRange` 为 true 时，初始最小值 | number | no | iOS/Android | yes | +| maximumTrackTintColor | 轨道颜色 | string | no | iOS/Android | yes | +| maximumValue | 追踪最大值 | number | no | iOS/Android | yes | +| migrate | 迁移到滑块的新实现所需的临时属性 | boolean | no | iOS/Android | yes | +| minimumTrackTintColor | 用于从最小值到当前值的轨道颜色 | string | no | iOS/Android | yes | +| minimumValue | 追踪最小值 | number | no | iOS/Android | yes | +| onRangeChange | onRangeChange 的回调。返回包含最小值和最大值的值对象 | SliderOnRangeChange | no | iOS/Android | yes | +| onReset | 当重置功能被调用时的回调通知 | () => void | no | iOS/Android | yes | +| onSeekEnd | 回调，用于通知滑块拖动已完成 | () => void | no | iOS/Android | yes | +| onSeekStart | 回调，用于通知滑块开始拖动 | () => void | no | iOS/Android | yes | +| onValueChange | onValueChange 的回调 | SliderOnValueChange | no | iOS/Android | yes | +| renderTrack | 自定义渲染而不是渲染轨道 | () => ReactElement \| ReactElement[] | no | iOS/Android | yes | +| step | 滑块的步长值。该值应介于 0 与（最大值 - 最小值）之间 | number | no | iOS/Android | yes | +| testID | 组件测试 ID | string | no | iOS/Android | yes | +| thumbStyle | thumb 样式 | ViewStyle | no | iOS/Android | yes | +| thumbTintColor | Thumb 颜色 | string | no | iOS/Android | yes | +| trackStyle | track 样式 | ViewStyle | no | iOS/Android | yes | +| useGap | 如果为true，最小值和最大值的滑块将不会重叠 | boolean | no | iOS/Android | yes | +| useRange | 如果为true，滑块将显示用于最小值的第二个滑块按钮 | boolean | no | iOS/Android | yes | +| value | 初始值 | number | no | iOS/Android | yes | **Switch**：开关切换组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | ------------------------------------------------------------ | ------------------------ | -------- | ----------- | ----------------- | -| disabled | Whether the switch should be disabled | boolean | no | iOS/Android | yes | -| disabledColor | The Switch background color when it's disabled | string | no | iOS/Android | yes | -| height | The Switch height | number | no | iOS/Android | yes | -| id | Component id | string | no | iOS/Android | yes | -| offColor | The Switch background color when it's turned off | string | no | iOS/Android | yes | -| onColor | The Switch background color when it's turned on | string | no | iOS/Android | yes | -| onValueChange | Invoked with the new value when the value changes | (value: boolean) => void | no | iOS/Android | yes | -| style | Custom style | ViewStyle | no | iOS/Android | yes | -| testID | Component test id | string | no | iOS/Android | yes | -| thumbColor | The Switch's thumb color | string | no | iOS/Android | yes | -| thumbSize | The Switch's thumb size (width & height) | number | no | iOS/Android | yes | -| thumbStyle | The Switch's thumb style | ViewStyle | no | iOS/Android | yes | -| value | The value of the switch. If true the switch will be turned on. Default value is false | boolean | no | iOS/Android | yes | -| width | The Switch width | number | no | iOS/Android | yes | +| disabled | 是否应禁用开关 | boolean | no | iOS/Android | yes | +| disabledColor | 开关禁用时的背景颜色 | string | no | iOS/Android | yes | +| height | 开关高度 | number | no | iOS/Android | yes | +| id | 组件 id | string | no | iOS/Android | yes | +| offColor | 开关关闭时的背景颜色 | string | no | iOS/Android | yes | +| onColor | 开关开启时的背景颜色 | string | no | iOS/Android | yes | +| onValueChange | 当值发生变化时，使用新值调用 | (value: boolean) => void | no | iOS/Android | yes | +| style | 自定义样式 | ViewStyle | no | iOS/Android | yes | +| testID | 组件测试 id | string | no | iOS/Android | yes | +| thumbColor | Switch的摇杆颜色 | string | no | iOS/Android | yes | +| thumbSize | Switch 拇指大小（宽度和高度） | number | no | iOS/Android | yes | +| thumbStyle | Switch的拇指风格 | ViewStyle | no | iOS/Android | yes | +| value | 开关的值。如果为true，开关将被打开。默认值为false | boolean | no | iOS/Android | yes | +| width | 开关宽度 | number | no | iOS/Android | yes | **ChipsInput**：芯片输入组件，该组件扩展了[TextField](https://wix.github.io/react-native-ui-lib/docs/components/form/TextField)属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ---------------------------------------------------- | --------------------------------------------- | -------- | ----------- | ----------------- | -| chips | List of chips to render | ChipProps[] | no | iOS/Android | yes | -| defaultChipProps | Default set of props to pass by default to all chips | ChipProps | no | iOS/Android | yes | -| maxChips | The maximum chips to allow adding | number | no | iOS/Android | yes | -| onChange | Callback for chips change (adding or removing chip) | (newChips, changeReason, updatedChip) => void | no | iOS/Android | yes | +| chips | 要渲染的芯片列表 | ChipProps[] | no | iOS/Android | yes | +| defaultChipProps | 默认要传递给所有芯片的属性集合 | ChipProps | no | iOS/Android | yes | +| maxChips | 允许添加的最大筹码数 | number | no | iOS/Android | yes | +| onChange | item变更回调（添加或移除item） | (newChips, changeReason, updatedChip) => void | no | iOS/Android | yes | **ColorPalette**：调色板组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ------------------------------------------------------------ | --------------------------------------------- | -------- | ----------- | ----------------- | -| animatedIndex | Default is last，The index of the item to animate at first render | number | no | iOS/Android | yes | -| backgroundColor | The ColorPalette's background color | string | no | iOS/Android | yes | -| colors | Array of colors to render in the palette | string[] | no | iOS/Android | yes | -| containerStyle | Component's container style | ViewStyle | no | iOS/Android | yes | -| containerWidth | The container margins | number | no | iOS/Android | yes | -| loop | Whether the colors pagination scrolls in a loop | boolean | no | iOS/Android | yes | -| numberOfRows | The number of color rows from 2 to 5 | number | no | iOS/Android | yes | -| onValueChange | Invoked once when value changes by selecting one of the swatches in the palette | (value: string, colorInfo: ColorInfo) => void | no | iOS/Android | yes | -| style | Component's style | ViewStyle | no | iOS/Android | yes | -| swatchStyle | Style to pass all the ColorSwatches in the palette | ViewStyle | no | iOS/Android | yes | -| testID | The test id for e2e tests | string | no | iOS/Android | yes | -| usePagination | Whether to use pagination when number of colors exceeds the number of rows | boolean | no | iOS/Android | yes | -| value | The value of the selected swatch | string | no | iOS/Android | yes | +| animatedIndex | 默认值为最后一项，首次渲染时要动画的项目索引 | number | no | iOS/Android | yes | +| backgroundColor | ColorPalette 的背景颜色 | string | no | iOS/Android | yes | +| colors | 调色板中要显示的颜色数组 | string[] | no | iOS/Android | yes | +| containerStyle | 组件的容器样式 | ViewStyle | no | iOS/Android | yes | +| containerWidth | 容器边距 | number | no | iOS/Android | yes | +| loop | 颜色分页是否循环滚动 | boolean | no | iOS/Android | yes | +| numberOfRows | 颜色行数从2到5 | number | no | iOS/Android | yes | +| onValueChange | 当通过选择调色板中的一个色块而更改值时调用一次 | (value: string, colorInfo: ColorInfo) => void | no | iOS/Android | yes | +| style | 组件样式 | ViewStyle | no | iOS/Android | yes | +| swatchStyle | 风格以通过调色板中的所有颜色样本 | ViewStyle | no | iOS/Android | yes | +| testID | 端到端测试的测试 ID | string | no | iOS/Android | yes | +| usePagination | 当颜色数量超过行数时是否使用分页 | boolean | no | iOS/Android | yes | +| value | 所选色样的数值 | string | no | iOS/Android | yes | **ColorPicker**：选色器组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| accessibilityLabels | Accessibility labels as an object of strings | { addButton: string, dismissButton: string, doneButton: string, input: string} | no | iOS/Android | yes | -| animatedIndex | Default is last，The index of the item to animate at first render | number | no | iOS/Android | yes | -| backgroundColor | The ColorPicker's background color | string | no | iOS/Android | yes | -| colors | Array of colors for the picker's color palette (hex values) | string[] | no | iOS/Android | yes | -| onValueChange | Callback for the picker's color palette change | (value: string, colorInfo: ColorInfo) => void | no | iOS/Android | yes | -| testID | The test id for e2e tests | string | no | iOS/Android | yes | -| value | The value of the selected swatch | string | no | iOS/Android | yes | +| accessibilityLabels | 作为字符串对象的无障碍标签 | { addButton: string, dismissButton: string, doneButton: string, input: string} | no | iOS/Android | yes | +| animatedIndex | 默认为最后一项，首次渲染时要动画的项目索引 | number | no | iOS/Android | yes | +| backgroundColor | ColorPicker 的背景颜色 | string | no | iOS/Android | yes | +| colors | 用于选择器调色板的颜色数组（十六进制值） | string[] | no | iOS/Android | yes | +| onValueChange | 选择器调色板更改的回调 | (value: string, colorInfo: ColorInfo) => void | no | iOS/Android | yes | +| testID | 用于端到端测试的测试 ID | string | no | iOS/Android | yes | +| value | 所选色样的数值 | string | no | iOS/Android | yes | **ColorSwatch**：颜色样板组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------- | ------------------------------------------------------------ | --------------------------------------------- | -------- | ----------- | ----------------- | -| animated | Is first render should be animated | boolean | no | iOS/Android | yes | -| color | The color of the ColorSwatch | string | no | iOS/Android | yes | -| index | The index of the Swatch if in array | number | no | iOS/Android | yes | -| onPress | Callback from press event | (value: string, colorInfo: ColorInfo) => void | no | iOS/Android | yes | -| selected | Is the initial state is selected | boolean | no | iOS/Android | yes | -| size | Color Swatch size | number | no | iOS/Android | yes | -| style | Component's style | ViewStyle | no | iOS/Android | yes | -| testID | The test id for e2e tests | string | no | iOS/Android | yes | -| unavailable | Is the initial state is unavailable | boolean | no | iOS/Android | yes | -| value | Must be different than other ColorSwatches in the same group，The identifier value of the ColorSwatch in a ColorSwatch palette | string | no | iOS/Android | yes | +| animated | 首次渲染是否应动画化 | boolean | no | iOS/Android | yes | +| color | ColorSwatch 的颜色 | string | no | iOS/Android | yes | +| index | 如果在数组中，色样的索引 | number | no | iOS/Android | yes | +| onPress | 按下事件的回调 | (value: string, colorInfo: ColorInfo) => void | no | iOS/Android | yes | +| selected | 初始状态是否被选中 | boolean | no | iOS/Android | yes | +| size | 颜色色样尺寸 | number | no | iOS/Android | yes | +| style | 组件的样式 | ViewStyle | no | iOS/Android | yes | +| testID | 用于端到端测试的测试 ID | string | no | iOS/Android | yes | +| unavailable | 初始状态是否不可用 | boolean | no | iOS/Android | yes | +| value | 必须与同一组中的其他 ColorSwatch 不同，ColorSwatch 调色板中 ColorSwatch 的标识符值 | string | no | iOS/Android | yes | **DateTimePicker**：时间选择组件，该组件扩展了[TextField](https://wix.github.io/react-native-ui-lib/docs/components/form/TextField)属性，依赖[@react-native-community/datetimepicker](/zh-cn/react-native-community-datetimepicker)库。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------------------- | ------------------------------------------------------------ | ------------------------------------------------- | -------- | ----------- | ----------------- | -| dateTimeFormatter | A callback function to format the time or date | (value: Date, mode: DateTimePickerMode) => string | no | iOS/Android | yes | -| dialogProps | Props to pass the Dialog component | DialogProps | no | iOS/Android | yes | -| display | Defines the visual display of the picker. The default value is 'spinner' on iOS and 'default' on Android. The list of all possible values are default, spinner, calendar or clock on Android and default, spinner, compact or inline for iOS. Full list can be found here:[react-native-datetimepicker](https://github.com/react-native-datetimepicker/datetimepicker#display-optional) | string | no | iOS/Android | yes | -| editable | Should this input be editable or disabled | boolean | no | iOS/Android | yes | -| headerStyle | Style to apply to the iOS dialog header | ViewStyle | no | iOS/Android | yes | -| is24Hour | Android only, Allows changing of the time picker to a 24 hour format | boolean | no | Android | no | -| locale | iOS only, Allows changing of the locale of the component | string | no | iOS | yes | -| maximumDate | The maximum date or time value to use | Date | no | iOS/Android | yes | -| minimumDate | The minimum date or time value to use | Date | no | iOS/Android | yes | -| minuteInterval | iOS only, The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 | number | no | iOS | yes | -| mode | The type of picker to display ('date' or 'time') | DATE \|TIME | no | iOS/Android | yes | -| onChange | Called when the date/time change | () => Date | no | iOS/Android | yes | -| renderInput | Render custom input | JSX.Element | no | iOS/Android | yes | -| themeVariant | Override system theme variant (dark or light mode) used by the date picker | LIGHT \|DARK | no | iOS/Android | yes | -| timeZoneOffsetInMinutes | iOS only, Allows changing of the timeZone of the date picker. By default it uses the device's time zone | number | no | iOS | yes | -| value | Defaults to device's date and time, The initial value to set the picker to | Date | no | iOS/Android | yes | -| backgroundColor7.43.1+ | Background color of the wheel picker | string | no | iOS/Android | yes | -| textColor7.43.1+ | Text color of the wheel picker items | string | no | iOS/Android | no | +| dateTimeFormatter | 用于格式化时间或日期的回调函数 | (value: Date, mode: DateTimePickerMode) => string | no | iOS/Android | yes | +| dialogProps | 传递给 Dialog 组件的属性 | DialogProps | no | iOS/Android | yes | +| display | 定义选择器的视觉显示。iOS 上的默认值为"spinner"，Android 上的默认值为"default"。所有可能值的列表包括 Android 上的 default、spinner、calendar 或 clock，以及 iOS 上的 default、spinner、compact 或 inline。完整列表可以在这里找到：[react-native-datetimepicker](https://github.com/react-native-datetimepicker/datetimepicker#display-optional) | string | no | iOS/Android | yes | +| editable | 此输入是否应可编辑或禁用 | boolean | no | iOS/Android | yes | +| headerStyle | 应用于 iOS 对话框标题的样式 | ViewStyle | no | iOS/Android | yes | +| is24Hour | 仅限 Android，允许将时间选择器更改为 24 小时格式 | boolean | no | Android | no | +| locale | 仅限 iOS，允许更改组件的区域设置 | string | no | iOS | yes | +| maximumDate | 要使用的最大日期或时间值 | Date | no | iOS/Android | yes | +| minimumDate | 要使用的最小日期或时间值 | Date | no | iOS/Android | yes | +| minuteInterval | 仅限 iOS，可以选择分钟的间隔。可能的值是：1、2、3、4、5、6、10、12、15、20、30 | number | no | iOS | yes | +| mode | 要显示的选择器类型（'date' 或 'time'） | DATE \|TIME | no | iOS/Android | yes | +| onChange | 当日期/时间更改时调用 | () => Date | no | iOS/Android | yes | +| renderInput | 渲染自定义输入 | JSX.Element | no | iOS/Android | yes | +| themeVariant | 覆盖日期选择器使用的系统主题变体（深色或浅色模式） | LIGHT \|DARK | no | iOS/Android | yes | +| timeZoneOffsetInMinutes | 仅限 iOS，允许更改日期选择器的时区。默认使用设备的时区 | number | no | iOS | yes | +| value | 默认为设备的日期和时间，设置选择器的初始值 | Date | no | iOS/Android | yes | +| backgroundColor7.43.1+ | 滚轮选择器的背景颜色 | string | no | iOS/Android | yes | +| textColor7.43.1+ | 滚轮选择器项目的文本颜色 | string | no | iOS/Android | no | **MaskedInput**：掩码输入组件，该组件扩展了[TextInput](https://reactnative.dev/docs/textinput)属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ------------------------------------------------------------ | ------------------ | -------- | ----------- | ----------------- | -| containerStyle | container style for the masked input container | ViewStyle | no | iOS/Android | yes | -| renderMaskedText | callback for rendering the custom input out of the value returns from the actual input | React.ReactElement | no | iOS/Android | yes | +| containerStyle | 掩码输入容器的容器样式 | ViewStyle | no | iOS/Android | yes | +| renderMaskedText | 用于从实际输入返回的值渲染自定义输入的回调 | React.ReactElement | no | iOS/Android | yes | **NumberInput**：数字输入框组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------- | ------------------------------------------------------------ | ------------------------------- | -------- | ----------- | ----------------- | -| containerStyle | Container style of the whole component | ViewStyle | no | iOS/Android | yes | -| contextMenuHidden | Requires @react-native-community/clipboard to be installed. If true, context menu is hidden. | boolean | no | iOS/Android | yes | -| fractionDigits | Number of digits after the decimal point. Must be in the range 0 - 20, inclusive. | number | no | iOS/Android | yes | -| initialNumber | A valid number (in en locale, i.e. only digits and a decimal point). | number | no | iOS/Android | yes | -| leadingText | A leading text | string | no | iOS/Android | yes | -| leadingTextStyle | The style of the leading text | TextStyle | no | iOS/Android | yes | -| onChangeNumber | Callback that is called when the number value has changed. | (data: NumberInputData) => void | no | iOS/Android | yes | -| textFieldProps | Most of TextField's props can be applied, except for ones that are passed directly via named props. | TextFieldProps | no | iOS/Android | yes | -| trailingText | A trailing text | string | no | iOS/Android | yes | -| trailingTextStyle | The style of the trailing text | ViewStyle | no | iOS/Android | yes | +| containerStyle | 整个组件的容器样式 | ViewStyle | no | iOS/Android | yes | +| contextMenuHidden | 需要安装 @react-native-community/clipboard。如果为 true，则上下文菜单隐藏。 | boolean | no | iOS/Android | yes | +| fractionDigits | 小数点后的位数。必须在 0 - 20 的范围内（含）。 | number | no | iOS/Android | yes | +| initialNumber | 有效的数字（在 en 区域设置中，即仅数字和小数点）。 | number | no | iOS/Android | yes | +| leadingText | 前导文本 | string | no | iOS/Android | yes | +| leadingTextStyle | 前导文本的样式 | TextStyle | no | iOS/Android | yes | +| onChangeNumber | 当数字值更改时调用的回调。 | (data: NumberInputData) => void | no | iOS/Android | yes | +| textFieldProps | 除了通过命名属性直接传递的属性外，可以应用大多数 TextField 的属性。 | TextFieldProps | no | iOS/Android | yes | +| trailingText | 尾随文本 | string | no | iOS/Android | yes | +| trailingTextStyle | 尾随文本的样式 | ViewStyle | no | iOS/Android | yes | **Picker**：弹窗选择组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| customPickerProps | Custom picker props (when using renderPicker, will apply on the button wrapper) | object | no | iOS/Android | yes | -| enableModalBlur | iOS only，Adds blur effect to picker modal | boolean | no | iOS | yes | -| fieldType | Pass for different field type UI (form, filter or settings) | PickerFieldTypes | no | iOS/Android | yes | -| getLabel | A function that returns the label to show for the selected Picker value | (value: string \| number) => void | no | iOS/Android | yes | -| items | Data source for Picker | {label: string, value: string \| number}[] | no | iOS/Android | yes | -| listProps | Pass props to the list component that wraps the picker options (allows to control FlatList behavior) | FlatListProps | no | iOS/Android | yes | -| migrate | Temporary prop required for migration to Picker's new API | boolean | no | iOS/Android | yes | -| mode | SINGLE mode or MULTI mode | SINGLE \| MULTI | no | iOS/Android | yes | -| onChange | Callback for when picker value change | (value: string \| number) => void | no | iOS/Android | yes | -| onPress | Add onPress callback for when pressing the picker | () => void | no | iOS/Android | yes | -| onSearchChange | Callback for picker modal search input text change (only when passing showSearch) | V7.29.1:
(searchValue: string) => void
V7.43.1:
(searchValue: string, filteredItems?: PickerFilteredItems) => void | no | iOS/Android | yes | -| pickerModalProps | Pass props to the picker modal | ModalProps | no | iOS/Android | yes | -| renderCustomModal | Render custom picker modal | ({visible, children, toggleModal}) => void) | no | iOS/Android | yes | -| renderCustomSearch | Render custom search input (only when passing showSearch) | (props) => void | no | iOS/Android | yes | -| renderItem | Render custom picker item | (value, {{...props, isSelected}}, itemLabel) => void | no | iOS/Android | yes | -| renderPicker | Render custom picker - input will be value (see above)\Example:\renderPicker = (selectedItem) => {...} | (selectedItem, itemLabel) => void | no | iOS/Android | yes | -| searchPlaceholder | Placeholder text for the search input (only when passing showSearch) | string | no | iOS/Android | yes | -| searchStyle | Style object for the search input (only when passing showSearch) | {color: string, placeholderTextColor: string, selectionColor: string} | no | iOS/Android | yes | -| selectionLimit | Limit the number of selected items | number | no | iOS/Android | yes | -| showSearch | Show search input to filter picker items by label | boolean | no | iOS/Android | yes | -| topBarProps | The picker modal top bar props | Modal's TopBarProps | no | iOS/Android | yes | -| useSafeArea | Add safe area in the Picker modal view | boolean | no | iOS/Android | yes | -| useWheelPicker | Use wheel picker instead of a list picker | boolean | no | iOS/Android | yes | -| value | Picker current value | string \| number | no | iOS/Android | yes | -| renderCustomTopElement7.43.1+ | Render custom top element | (value?: PickerValue) => React.ReactElement | no | iOS/Android | yes | -| showLoader7.43.1+ | Show a loader (while items are loading/fetching) | boolean | no | iOS/Android | yes | -| customLoaderElement7.43.1+ | Custom loader element | ReactNode | no | iOS/Android | yes | +| customPickerProps | 自定义选择器属性（使用 renderPicker 时，将应用于按钮包装器） | object | no | iOS/Android | yes | +| enableModalBlur | 仅限 iOS，为选择器模态添加模糊效果 | boolean | no | iOS | yes | +| fieldType | 为不同的字段类型 UI 传递（表单、过滤器或设置） | PickerFieldTypes | no | iOS/Android | yes | +| getLabel | 返回所选 Picker 值要显示的标签的函数 | (value: string \| number) => void | no | iOS/Android | yes | +| items | Picker 的数据源 | {label: string, value: string \| number}[] | no | iOS/Android | yes | +| listProps | 传递给包装选择器选项的列表组件的属性（允许控制 FlatList 行为） | FlatListProps | no | iOS/Android | yes | +| migrate | 迁移到 Picker 新 API 所需的临时属性 | boolean | no | iOS/Android | yes | +| mode | 单选模式或多选模式 | SINGLE \| MULTI | no | iOS/Android | yes | +| onChange | 当选择器值更改时的回调 | (value: string \| number) => void | no | iOS/Android | yes | +| onPress | 为按下选择器时添加 onPress 回调 | () => void | no | iOS/Android | yes | +| onSearchChange | 选择器模态搜索输入文本更改的回调（仅在传递 showSearch 时） | V7.29.1:
(searchValue: string) => void
V7.43.1:
(searchValue: string, filteredItems?: PickerFilteredItems) => void | no | iOS/Android | yes | +| pickerModalProps | 传递给选择器模态的属性 | ModalProps | no | iOS/Android | yes | +| renderCustomModal | 渲染自定义选择器模态 | ({visible, children, toggleModal}) => void) | no | iOS/Android | yes | +| renderCustomSearch | 渲染自定义搜索输入（仅在传递 showSearch 时） | (props) => void | no | iOS/Android | yes | +| renderItem | 渲染自定义选择器项 | (value, {{...props, isSelected}}, itemLabel) => void | no | iOS/Android | yes | +| renderPicker | 渲染自定义选择器 - 输入将是值（见上文）\示例：\renderPicker = (selectedItem) => {...} | (selectedItem, itemLabel) => void | no | iOS/Android | yes | +| searchPlaceholder | 搜索输入的占位符文本（仅在传递 showSearch 时） | string | no | iOS/Android | yes | +| searchStyle | 搜索输入的样式对象（仅在传递 showSearch 时） | {color: string, placeholderTextColor: string, selectionColor: string} | no | iOS/Android | yes | +| selectionLimit | 限制所选项目的数量 | number | no | iOS/Android | yes | +| showSearch | 显示搜索输入以按标签过滤选择器项 | boolean | no | iOS/Android | yes | +| topBarProps | 选择器模态顶部栏属性 | Modal's TopBarProps | no | iOS/Android | yes | +| useSafeArea | 在选择器模态视图中添加安全区域 | boolean | no | iOS/Android | yes | +| useWheelPicker | 使用滚轮选择器而不是列表选择器 | boolean | no | iOS/Android | yes | +| value | 选择器当前值 | string \| number | no | iOS/Android | yes | +| renderCustomTopElement7.43.1+ | 渲染自定义顶部元素 | (value?: PickerValue) => React.ReactElement | no | iOS/Android | yes | +| showLoader7.43.1+ | 显示加载器（当项目正在加载/获取时） | boolean | no | iOS/Android | yes | +| customLoaderElement7.43.1+ | 自定义加载器元素 | ReactNode | no | iOS/Android | yes | **Picker.Item**：弹窗选择Item组件，配合Picker组件使用。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| disabled | Is the item disabled | boolean | no | iOS/Android | yes | -| getItemLabel | Custom function for the item label | (value: string \| number) => string | no | iOS/Android | yes | -| isSelected | Is the item selected | boolean | no | iOS/Android | yes | -| label | Item's label | string | no | iOS/Android | yes | -| labelStyle | Item's label style | ViewStyle | no | iOS/Android | yes | -| onPress | Callback for onPress action, will stop selection if false is returned | (selected: boolean \| undefined, props: any) => void \| Promise; | no | iOS/Android | yes | -| onSelectedLayout | Callback for onLayout event | (event: LayoutChangeEvent) => void | no | iOS/Android | yes | -| selectedIcon | Pass to change the selected icon | string | no | iOS/Android | yes | -| selectedIconColor | Pass to change the selected icon color | ImageSource | no | iOS/Android | yes | -| value | Item's value | string \| number | no | iOS/Android | yes | +| disabled | 项目是否禁用 | boolean | no | iOS/Android | yes | +| getItemLabel | 项目标签的自定义函数 | (value: string \| number) => string | no | iOS/Android | yes | +| isSelected | 项目是否被选中 | boolean | no | iOS/Android | yes | +| label | 项目的标签 | string | no | iOS/Android | yes | +| labelStyle | 项目的标签样式 | ViewStyle | no | iOS/Android | yes | +| onPress | onPress 操作的回调，如果返回 false 将停止选择 | (selected: boolean \| undefined, props: any) => void \| Promise; | no | iOS/Android | yes | +| onSelectedLayout | onLayout 事件的回调 | (event: LayoutChangeEvent) => void | no | iOS/Android | yes | +| selectedIcon | 传递以更改选中图标 | string | no | iOS/Android | yes | +| selectedIconColor | 传递以更改选中图标的颜色 | ImageSource | no | iOS/Android | yes | +| value | 项目的值 | string \| number | no | iOS/Android | yes | **SectionsWheelPicker**：滚动选择组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | --------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | -| activeTextColor | Text color for the focused row | string | no | iOS/Android | yes | -| faderProps | Custom props for fader. | FaderProps | no | iOS/Android | yes | -| inactiveTextColor | Text color for other, non-focused rows | string | no | iOS/Android | yes | -| itemHeight | Describe the height of each item in the WheelPicker | number | no | iOS/Android | yes | -| numberOfVisibleRows | Describe the number of rows visible | number | no | iOS/Android | yes | -| sections | Array of sections | WheelPickerProps | no | iOS/Android | yes | -| testID | The component test id | string | no | iOS/Android | yes | -| textStyle | Row text style | TextStyle | no | iOS/Android | yes | +| activeTextColor | 聚焦行的文本颜色 | string | no | iOS/Android | yes | +| faderProps | 淡入淡出器的自定义属性。 | FaderProps | no | iOS/Android | yes | +| inactiveTextColor | 其他非聚焦行的文本颜色 | string | no | iOS/Android | yes | +| itemHeight | 描述 WheelPicker 中每个项目的高度 | number | no | iOS/Android | yes | +| numberOfVisibleRows | 描述可见行数 | number | no | iOS/Android | yes | +| sections | 部分数组 | WheelPickerProps | no | iOS/Android | yes | +| testID | 组件测试 ID | string | no | iOS/Android | yes | +| textStyle | 行文本样式 | TextStyle | no | iOS/Android | yes | **SegmentedControl**：切换值组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------------- | ----------------------------------------------- | ------------------------- | -------- | ----------- | ----------------- | -| activeBackgroundColor | The background color of the active segment | string | no | iOS/Android | yes | -| activeColor | The color of the active segment label | string | no | iOS/Android | yes | -| backgroundColor | The background color of the inactive segments | string | no | iOS/Android | yes | -| borderRadius | The segmentedControl borderRadius | number | no | iOS/Android | yes | -| containerStyle | Additional spacing styles for the container | ViewStyle | no | iOS/Android | yes | -| iconOnRight | Should the icon be on right of the label | boolean | no | iOS/Android | yes | -| initialIndex | Initial index to be active | number | no | iOS/Android | yes | -| onChangeIndex | Callback for when index has change. | (index: number) => void | no | iOS/Android | yes | -| outlineColor | The color of the active segment outline | string | no | iOS/Android | yes | -| outlineWidth | The width of the active segment outline | number | no | iOS/Android | yes | -| segmentLabelStyle | Segment label style | TextStyle | no | iOS/Android | yes | -| segments | Array on segments | SegmentedControlItemProps | no | iOS/Android | yes | -| segmentsStyle | Additional style for the segments | ViewStyle | no | iOS/Android | yes | -| style | Custom style to inner container | ViewStyle | no | iOS/Android | yes | -| testID | Component test id | string | no | iOS/Android | yes | -| throttleTime | Trailing throttle time of changing index in ms. | number | no | iOS/Android | yes | -| label7.43.1+ | SegmentedControl label | string | no | iOS/Android | yes | -| labelProps7.43.1+ | Pass props for the SegmentedControl label | TextProps | no | iOS/Android | yes | +| activeBackgroundColor | 活动段落的背景颜色 | string | no | iOS/Android | yes | +| activeColor | 活动段落标签的颜色 | string | no | iOS/Android | yes | +| backgroundColor | 非活动段落的背景颜色 | string | no | iOS/Android | yes | +| borderRadius | SegmentedControl 的边框半径 | number | no | iOS/Android | yes | +| containerStyle | 容器的额外间距样式 | ViewStyle | no | iOS/Android | yes | +| iconOnRight | 图标是否应在标签的右侧 | boolean | no | iOS/Android | yes | +| initialIndex | 初始激活的索引 | number | no | iOS/Android | yes | +| onChangeIndex | 当索引更改时的回调。 | (index: number) => void | no | iOS/Android | yes | +| outlineColor | 活动段落的轮廓颜色 | string | no | iOS/Android | yes | +| outlineWidth | 活动段落的轮廓宽度 | number | no | iOS/Android | yes | +| segmentLabelStyle | 段落标签样式 | TextStyle | no | iOS/Android | yes | +| segments | 段落数组 | SegmentedControlItemProps | no | iOS/Android | yes | +| segmentsStyle | 段落的额外样式 | ViewStyle | no | iOS/Android | yes | +| style | 内部容器的自定义样式 | ViewStyle | no | iOS/Android | yes | +| testID | 组件测试 ID | string | no | iOS/Android | yes | +| throttleTime | 更改索引的尾随节流时间（毫秒）。 | number | no | iOS/Android | yes | +| label7.43.1+ | SegmentedControl 标签 | string | no | iOS/Android | yes | +| labelProps7.43.1+ | 为 SegmentedControl 标签传递属性 | TextProps | no | iOS/Android | yes | **Stepper**：步进器组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------- | --------------------------------------------------- | ---------------------------------------- | -------- | ----------- | ----------------- | -| accessibilityLabel | Component accessibility label | string | no | iOS/Android | yes | -| disabled | Disables interaction with the stepper | boolean | no | iOS/Android | yes | -| maxValue | Maximum value | number | no | iOS/Android | yes | -| minValue | Minimum value | number | no | iOS/Android | yes | -| onValueChange | Value change callback function | (value: number, testID?: string) => void | no | iOS/Android | yes | -| small | Renders a small sized Stepper | boolean | no | iOS/Android | yes | -| step | The step to increase and decrease by (default is 1) | number | no | iOS/Android | yes | -| testID | Test id for component | string | no | iOS/Android | yes | -| value | Stepper value | number | no | iOS/Android | yes | -| type7.43.1+ | Stepper style type | StepperType | no | iOS/Android | yes | +| accessibilityLabel | 组件无障碍标签 | string | no | iOS/Android | yes | +| disabled | 禁用与步进器的交互 | boolean | no | iOS/Android | yes | +| maxValue | 最大值 | number | no | iOS/Android | yes | +| minValue | 最小值 | number | no | iOS/Android | yes | +| onValueChange | 值更改回调函数 | (value: number, testID?: string) => void | no | iOS/Android | yes | +| small | 渲染小尺寸的步进器 | boolean | no | iOS/Android | yes | +| step | 增加和减少的步长（默认为 1） | number | no | iOS/Android | yes | +| testID | 组件测试 ID | string | no | iOS/Android | yes | +| value | 步进器值 | number | no | iOS/Android | yes | +| type7.43.1+ | 步进器样式类型 | StepperType | no | iOS/Android | yes | **TextField**：文本域组件，扩展了[TextInput](https://reactnative.dev/docs/textinput)属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| centered | Whether to center the TextField - container and label | boolean | no | iOS/Android | yes | -| charCounterStyle | Pass custom style to character counter text | TextStyle | no | iOS/Android | yes | -| color | Input color | ColorType | no | iOS/Android | yes | -| containerProps | Container props of the whole component | Omit | no | iOS/Android | yes | -| containerStyle | Container style of the whole component | ViewStyle | no | iOS/Android | yes | -| enableErrors | Should support showing validation error message | boolean | no | iOS/Android | yes | -| fieldStyle | Internal style for the field container to style the field underline, outline and fill color | ViewStyle \| (context: FieldContextType, props) => ViewStyle | no | iOS/Android | yes | -| floatOnFocus | Should placeholder float on focus or when start typing | boolean | no | iOS/Android | yes | -| floatingPlaceholder | Pass to add floating placeholder support | boolean | no | iOS/Android | yes | -| floatingPlaceholderColor | The floating placeholder color | ColorType | no | iOS/Android | yes | -| floatingPlaceholderStyle | Custom style for the floating placeholder | TextStyle | no | iOS/Android | yes | -| formatter | Custom formatter for the input value (used only when input if not focused) | (value) => string \| undefined | no | iOS/Android | yes | -| hint | A hint text to display when focusing the field | string | no | iOS/Android | yes | -| label | Field label | string | no | iOS/Android | yes | -| labelColor | Field label color. Either a string or color by state map ({default, focus, error, disabled, readonly}) | ColorType | no | iOS/Android | yes | -| labelProps | Pass extra props to the label Text element | TextProps | no | iOS/Android | yes | -| labelStyle | Custom style for the field label | TextStyle | no | iOS/Android | yes | -| leadingAccessory | Pass to render a leading element | ReactElement | no | iOS/Android | yes | -| onChangeValidity | Callback for when field validity has changed | (isValid: boolean) => void | no | iOS/Android | yes | -| onValidationFailed | Callback for when field validated and failed | (failedValidatorIndex: number) => void | no | iOS/Android | yes | -| placeholder | The placeholder for the field | string | no | iOS/Android | yes | -| placeholderTextColor | Placeholder text color | ColorType | no | iOS/Android | yes | -| preset | Predefined preset to use for styling the field | 'default' \| null \|string | no | iOS/Android | yes | -| readonly | A UI preset for read only state | boolean | no | iOS/Android | yes | -| recorderTag | Recorder Tag | 'mask' \| 'unmask' | no | iOS/Android | yes | -| retainValidationSpace | Keep the validation space even if there is no validation message | boolean | no | iOS/Android | yes | -| showCharCounter | Should show a character counter (works only with maxLength) | boolean | no | iOS/Android | yes | -| showMandatoryIndication | Whether to show a mandatory field indication | boolean | no | iOS/Android | yes | -| trailingAccessory | Pass to render a trailing element | ReactElement | no | iOS/Android | yes | -| useGestureHandlerInput | Use react-native-gesture-handler instead of react-native for the base TextInput | boolean | no | iOS/Android | yes | -| validate | A single or multiple validator. Can be a string (required, email) or custom function. | Validator \| Validator [] | no | iOS/Android | yes | -| validateOnBlur | Should validate when losing focus of TextField | boolean | no | iOS/Android | yes | -| validateOnChange | Should validate when the TextField value changes | boolean | no | iOS/Android | yes | -| validateOnStart | Should validate when the TextField mounts | boolean | no | iOS/Android | yes | -| validationMessage | The validation message to display when field is invalid (depends on validate) | string \| string[] | no | iOS/Android | yes | -| validationMessagePosition | The position of the validation message (top/bottom) | ValidationMessagePosition | no | iOS/Android | yes | -| validationMessageStyle | Custom style for the validation message | TextStyle | no | iOS/Android | yes | -| validationDebounceTime7.43.1+ | Add a debounce timeout when sending validateOnChange | number | no | iOS/Android | yes | -| innerFlexBehavior7.43.1+ | Set the inner container to use flex behavior to resolve text overflow issues when using leading or trailing accessories(This may cause flex issues when the field is inside a row container) | boolean | no | iOS/Android | yes | +| centered | 是否居中 TextField - 容器和标签 | boolean | no | iOS/Android | yes | +| charCounterStyle | 为字符计数器文本传递自定义样式 | TextStyle | no | iOS/Android | yes | +| color | 输入颜色 | ColorType | no | iOS/Android | yes | +| containerProps | 整个组件的容器属性 | Omit | no | iOS/Android | yes | +| containerStyle | 整个组件的容器样式 | ViewStyle | no | iOS/Android | yes | +| enableErrors | 是否应支持显示验证错误消息 | boolean | no | iOS/Android | yes | +| fieldStyle | 用于设置字段下划线、轮廓和填充颜色的字段容器的内部样式 | ViewStyle \| (context: FieldContextType, props) => ViewStyle | no | iOS/Android | yes | +| floatOnFocus | 占位符是否应在聚焦或开始输入时浮动 | boolean | no | iOS/Android | yes | +| floatingPlaceholder | 传递以添加浮动占位符支持 | boolean | no | iOS/Android | yes | +| floatingPlaceholderColor | 浮动占位符颜色 | ColorType | no | iOS/Android | yes | +| floatingPlaceholderStyle | 浮动占位符的自定义样式 | TextStyle | no | iOS/Android | yes | +| formatter | 输入值的自定义格式化器（仅在输入未聚焦时使用） | (value) => string \| undefined | no | iOS/Android | yes | +| hint | 聚焦字段时显示的提示文本 | string | no | iOS/Android | yes | +| label | 字段标签 | string | no | iOS/Android | yes | +| labelColor | 字段标签颜色。可以是字符串或按状态映射的颜色（{default, focus, error, disabled, readonly}） | ColorType | no | iOS/Android | yes | +| labelProps | 为标签文本元素传递额外属性 | TextProps | no | iOS/Android | yes | +| labelStyle | 字段标签的自定义样式 | TextStyle | no | iOS/Android | yes | +| leadingAccessory | 传递以渲染前导元素 | ReactElement | no | iOS/Android | yes | +| onChangeValidity | 当字段有效性更改时的回调 | (isValid: boolean) => void | no | iOS/Android | yes | +| onValidationFailed | 当字段验证失败时的回调 | (failedValidatorIndex: number) => void | no | iOS/Android | yes | +| placeholder | 字段的占位符 | string | no | iOS/Android | yes | +| placeholderTextColor | 占位符文本颜色 | ColorType | no | iOS/Android | yes | +| preset | 用于设置字段样式的预定义预设 | 'default' \| null \|string | no | iOS/Android | yes | +| readonly | 只读状态的 UI 预设 | boolean | no | iOS/Android | yes | +| recorderTag | 记录器标签 | 'mask' \| 'unmask' | no | iOS/Android | yes | +| retainValidationSpace | 即使没有验证消息也保留验证空间 | boolean | no | iOS/Android | yes | +| showCharCounter | 是否应显示字符计数器（仅在使用 maxLength 时有效） | boolean | no | iOS/Android | yes | +| showMandatoryIndication | 是否显示必填字段指示 | boolean | no | iOS/Android | yes | +| trailingAccessory | 传递以渲染尾随元素 | ReactElement | no | iOS/Android | yes | +| useGestureHandlerInput | 为基础 TextInput 使用 react-native-gesture-handler 而不是 react-native | boolean | no | iOS/Android | yes | +| validate | 单个或多个验证器。可以是字符串（required, email）或自定义函数。 | Validator \| Validator [] | no | iOS/Android | yes | +| validateOnBlur | 是否应在失去 TextField 焦点时验证 | boolean | no | iOS/Android | yes | +| validateOnChange | 是否应在 TextField 值更改时验证 | boolean | no | iOS/Android | yes | +| validateOnStart | 是否应在 TextField 挂载时验证 | boolean | no | iOS/Android | yes | +| validationMessage | 当字段无效时显示的验证消息（取决于 validate） | string \| string[] | no | iOS/Android | yes | +| validationMessagePosition | 验证消息的位置（顶部/底部） | ValidationMessagePosition | no | iOS/Android | yes | +| validationMessageStyle | 验证消息的自定义样式 | TextStyle | no | iOS/Android | yes | +| validationDebounceTime7.43.1+ | 发送 validateOnChange 时添加去超时时间 | number | no | iOS/Android | yes | +| innerFlexBehavior7.43.1+ | 设置内部容器使用 flex 行为来解决使用前导或尾随附件时的文本溢出问题（当字段在行容器内时可能会导致 flex 问题） | boolean | no | iOS/Android | yes | **WheelPicker**：轮式拾取器组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | ------------------------------------------------------------ | ----------------------------------------------- | -------- | ----------- | ----------------- | -| activeTextColor | Text color for the focused row | string | no | iOS/Android | yes | -| align | Align the content to center, right ot left | WheelPickerAlign | no | iOS/Android | yes | -| flatListProps | Props to be sent to the FlatList. | FlatListProps | no | iOS/Android | yes | -| inactiveTextColor | Text color for other, non-focused rows | string | no | iOS/Android | yes | -| initialValue | Initial value (uncontrolled) | number \| string | no | iOS/Android | yes | -| itemHeight | Height of each item in the WheelPicker | number | no | iOS/Android | yes | -| items | Data source for WheelPicker | WheelPickerItemProps[] | no | iOS/Android | yes | -| label | Additional label to render next to the items text | string | no | iOS/Android | yes | -| labelProps | Additional label's props | TextProps | no | iOS/Android | yes | -| labelStyle | Additional label's style | TextStyle | no | iOS/Android | yes | -| numberOfVisibleRows | Number of rows visible | number | no | iOS/Android | yes | -| onChange | Change item event callback | (item: string \| number, index: number) => void | no | iOS/Android | yes | -| separatorsStyle | Extra style for the separators | ViewStyle | no | iOS/Android | yes | -| style | height is computed according to itemHeight * numberOfVisibleRows. Container's custom style | ViewStyle | no | iOS/Android | yes | -| testID | test identifier | string | no | iOS/Android | yes | -| textStyle | Row text custom style | TextStyle | no | iOS/Android | yes | +| activeTextColor | 聚焦行的文本颜色 | string | no | iOS/Android | yes | +| align | 将内容对齐到中心、右侧或左侧 | WheelPickerAlign | no | iOS/Android | yes | +| flatListProps | 要发送给 FlatList 的属性。 | FlatListProps | no | iOS/Android | yes | +| inactiveTextColor | 其他非聚焦行的文本颜色 | string | no | iOS/Android | yes | +| initialValue | 初始值（非受控） | number \| string | no | iOS/Android | yes | +| itemHeight | WheelPicker 中每个项目的高度 | number | no | iOS/Android | yes | +| items | WheelPicker 的数据源 | WheelPickerItemProps[] | no | iOS/Android | yes | +| label | 在项目文本旁边渲染的额外标签 | string | no | iOS/Android | yes | +| labelProps | 额外标签的属性 | TextProps | no | iOS/Android | yes | +| labelStyle | 额外标签的样式 | TextStyle | no | iOS/Android | yes | +| numberOfVisibleRows | 可见行数 | number | no | iOS/Android | yes | +| onChange | 更改项目事件回调 | (item: string \| number, index: number) => void | no | iOS/Android | yes | +| separatorsStyle | 分隔符的额外样式 | ViewStyle | no | iOS/Android | yes | +| style | 高度根据 itemHeight * numberOfVisibleRows 计算。容器的自定义样式 | ViewStyle | no | iOS/Android | yes | +| testID | 测试标识符 | string | no | iOS/Android | yes | +| textStyle | 行文本自定义样式 | TextStyle | no | iOS/Android | yes | **Incubator.Dialog**：弹出对话框组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------ | ----------------------------- | -------- | ----------- | ----------------- | -| containerProps | Extra props for the container | ViewProps | no | iOS/Android | yes | -| containerStyle | The Dialog`s container style (it is set to {position: 'absolute'}) `ViewStyle ` | ViewStyle | no | iOS/Android | yes | -| direction | The direction from which and to which the dialog is animating \ panning (default down). | up \|down \|left \|right | no | iOS/Android | yes | -| headerProps | The Dialog's header (title, subtitle etc) | DialogHeaderProps | no | iOS/Android | yes | -| ignoreBackgroundPress | Whether or not to ignore background press. | boolean | no | iOS/Android | yes | -| modalProps | Pass props to the dialog modal | ModalProps | no | iOS/Android | yes | -| onDismiss | Callback that is called after the dialog's dismiss (after the animation has ended). | (props?: DialogProps) => void | no | iOS/Android | yes | -| testID | Used to locate this view in end-to-end tests.The container has the original id.Supported inner elements IDs:`${TestID}.modal` - the Modal's id.`${TestID}. overlayFadingBackground` - the fading background id. | string | no | iOS/Android | yes | -| visible | The visibility of the dialog | boolean | no | iOS/Android | yes | +| containerProps | 容器的额外属性 | ViewProps | no | iOS/Android | yes | +| containerStyle | Dialog 的容器样式（设置为 {position: 'absolute'}） `ViewStyle ` | ViewStyle | no | iOS/Android | yes | +| direction | 对话框动画/平移的方向（默认为向下）。 | up \|down \|left \|right | no | iOS/Android | yes | +| headerProps | Dialog 的标题（标题、副标题等） | DialogHeaderProps | no | iOS/Android | yes | +| ignoreBackgroundPress | 是否忽略背景按下。 | boolean | no | iOS/Android | yes | +| modalProps | 传递给对话框模态的属性 | ModalProps | no | iOS/Android | yes | +| onDismiss | 在对话框关闭后调用的回调（动画结束后）。 | (props?: DialogProps) => void | no | iOS/Android | yes | +| testID | 用于在端到端测试中定位此视图。容器具有原始 ID。支持的内部元素 ID：`${TestID}.modal` - Modal 的 ID。`${TestID}. overlayFadingBackground` - 淡入淡出背景的 ID。 | string | no | iOS/Android | yes | +| visible | 对话框的可见性 | boolean | no | iOS/Android | yes | **Dialog.Header**：弹窗头部组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------ | -------------------- | -------- | ----------- | ----------------- | -| bottomAccessory | Pass to render a bottom element below the subtitle | ReactElement | no | iOS/Android | yes | -| contentContainerStyle | Style for the leading + content + trailing components (without the bottomAccessory) | ViewProps['style'] | no | iOS/Android | yes | -| leadingAccessory | Pass to render a leading element | ReactElement | no | iOS/Android | yes | -| onPress | onPress callback for the inner content | () => void | no | iOS/Android | yes | -| showDivider | Show the header's divider | boolean | no | iOS/Android | yes | -| showKnob | Show the header's knob | boolean | no | iOS/Android | yes | -| subtitle | Subtitle | string | no | iOS/Android | yes | -| subtitleProps | Subtitle extra props | TextProps | no | iOS/Android | yes | -| subtitleStyle | Subtitle text style | StyleProp | no | iOS/Android | yes | -| title | Title | string | no | iOS/Android | yes | -| titleProps | Title extra props | TextProps | no | iOS/Android | yes | -| titleStyle | Title text style | StyleProp | no | iOS/Android | yes | -| topAccessory | Pass to render a top element above the title | ReactElement | no | iOS/Android | yes | -| trailingAccessory | Pass to render a trailing element | ReactElement | no | iOS/Android | yes | +| bottomAccessory | 传递以在副标题下方渲染底部元素 | ReactElement | no | iOS/Android | yes | +| contentContainerStyle | 前导 + 内容 + 尾随组件的样式（不含底部附件） | ViewProps['style'] | no | iOS/Android | yes | +| leadingAccessory | 传递以渲染前导元素 | ReactElement | no | iOS/Android | yes | +| onPress | 内部内容的 onPress 回调 | () => void | no | iOS/Android | yes | +| showDivider | 显示标题的分隔符 | boolean | no | iOS/Android | yes | +| showKnob | 显示标题的旋钮 | boolean | no | iOS/Android | yes | +| subtitle | 副标题 | string | no | iOS/Android | yes | +| subtitleProps | 副标题的额外属性 | TextProps | no | iOS/Android | yes | +| subtitleStyle | 副标题文本样式 | StyleProp | no | iOS/Android | yes | +| title | 标题 | string | no | iOS/Android | yes | +| titleProps | 标题的额外属性 | TextProps | no | iOS/Android | yes | +| titleStyle | 标题文本样式 | StyleProp | no | iOS/Android | yes | +| topAccessory | 传递以在标题上方渲染顶部元素 | ReactElement | no | iOS/Android | yes | +| trailingAccessory | 传递以渲染尾随元素 | ReactElement | no | iOS/Android | yes | **Incubator.Slider**：滑块组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------- | ------------------------------------------------------------ | ------------------------------------- | -------- | ----------- | ----------------- | -| accessible | If true the component will have accessibility features enabled | boolean | no | iOS/Android | yes | -| activeThumbStyle | The active (during press) thumb style | ViewStyle | no | iOS/Android | yes | -| containerStyle | The container style | ViewStyle | no | iOS/Android | yes | -| disableActiveStyling | If true the Slider will not change it's style on press | boolean | no | iOS/Android | yes | -| disableRTL | If true the Slider will stay in LTR mode even if the app is on RTL mode | boolean | no | iOS/Android | yes | -| disabled | If true the Slider will be disabled and will appear in disabled color | boolean | no | iOS/Android | yes | -| disabledThumbTintColor | Disabled thumb color | string | no | iOS/Android | yes | -| enableThumbShadow | Whether the thumb will have a shadow (with 'migrate' true only) | boolean | no | iOS/Android | yes | -| initialMaximumValue | Only when `useRange` is true. Initial maximum value | number | no | iOS/Android | yes | -| initialMinimumValue | Only when `useRange` is true. Initial minimum value | number | no | iOS/Android | yes | -| maximumTrackTintColor | The track color | string | no | iOS/Android | yes | -| maximumValue | Track maximum value | number | no | iOS/Android | yes | -| minimumTrackTintColor | The color used for the track from minimum value to current value | string | no | iOS/Android | yes | -| minimumValue | Track minimum value | number | no | iOS/Android | yes | -| onRangeChange | Callback for onRangeChange. Returns values object with the min and max values | SliderOnRangeChange | no | iOS/Android | yes | -| onReset | Callback that notifies when the reset function was invoked | () => void | no | iOS/Android | yes | -| onSeekEnd | Callback that notifies about slider seeking is finished | () => void | no | iOS/Android | yes | -| onSeekStart | Callback that notifies about slider seeking is started | () => void | no | iOS/Android | yes | -| onValueChange | Callback for onValueChange | SliderOnValueChange | no | iOS/Android | yes | -| renderTrack | Custom render instead of rendering the track | () => ReactElement \| ReactElement[] | no | iOS/Android | yes | -| step | Step value of the slider. The value should be between 0 and (maximumValue - minimumValue) | number | no | iOS/Android | yes | -| testID | The component test id | string | no | iOS/Android | yes | -| throttleTime | Control the throttle time of the onValueChange and onRangeChange callbacks | number | no | iOS/Android | yes | -| thumbHitSlop | Defines how far a touch event can start away from the thumb | number | no | iOS/Android | yes | -| thumbStyle | The thumb style | ViewStyle | no | iOS/Android | yes | -| thumbTintColor | Thumb color | string | no | iOS/Android | yes | -| trackStyle | The track style | ViewStyle | no | iOS/Android | yes | -| useGap | If true the min and max thumbs will not overlap | boolean | no | iOS/Android | yes | -| useRange | If true the Slider will display a second thumb for the min value | boolean | no | iOS/Android | yes | -| value | Initial value | number | no | iOS/Android | yes | +| accessible | 如果为 true，组件将启用无障碍功能 | boolean | no | iOS/Android | yes | +| activeThumbStyle | 活动时（按下时）的拇指样式 | ViewStyle | no | iOS/Android | yes | +| containerStyle | 容器样式 | ViewStyle | no | iOS/Android | yes | +| disableActiveStyling | 如果为 true，Slider 在按下时不会改变其样式 | boolean | no | iOS/Android | yes | +| disableRTL | 如果为 true，即使应用程序处于 RTL 模式，Slider 也将保持在 LTR 模式 | boolean | no | iOS/Android | yes | +| disabled | 如果为 true，Slider 将被禁用并以禁用颜色显示 | boolean | no | iOS/Android | yes | +| disabledThumbTintColor | 禁用的拇指颜色 | string | no | iOS/Android | yes | +| enableThumbShadow | 拇指是否会有阴影（仅在 'migrate' 为 true 时） | boolean | no | iOS/Android | yes | +| initialMaximumValue | 仅当 `useRange` 为 true 时。初始最大值 | number | no | iOS/Android | yes | +| initialMinimumValue | 仅当 `useRange` 为 true 时。初始最小值 | number | no | iOS/Android | yes | +| maximumTrackTintColor | 轨道颜色 | string | no | iOS/Android | yes | +| maximumValue | 轨道最大值 | number | no | iOS/Android | yes | +| minimumTrackTintColor | 从最小值到当前值的轨道颜色 | string | no | iOS/Android | yes | +| minimumValue | 轨道最小值 | number | no | iOS/Android | yes | +| onRangeChange | onRangeChange 的回调。返回包含最小值和最大值的值对象 | SliderOnRangeChange | no | iOS/Android | yes | +| onReset | 当重置功能被调用时通知的回调 | () => void | no | iOS/Android | yes | +| onSeekEnd | 通知滑块寻道已完成时的回调 | () => void | no | iOS/Android | yes | +| onSeekStart | 通知滑块寻道开始时的回调 | () => void | no | iOS/Android | yes | +| onValueChange | onValueChange 的回调 | SliderOnValueChange | no | iOS/Android | yes | +| renderTrack | 自定义渲染而不是渲染轨道 | () => ReactElement \| ReactElement[] | no | iOS/Android | yes | +| step | 滑块的步长值。该值应介于 0 与（最大值 - 最小值）之间 | number | no | iOS/Android | yes | +| testID | 组件测试 ID | string | no | iOS/Android | yes | +| throttleTime | 控制 onValueChange 和 onRangeChange 回调的节流时间 | number | no | iOS/Android | yes | +| thumbHitSlop | 定义触摸事件可以从拇指开始多远 | number | no | iOS/Android | yes | +| thumbStyle | 拇指样式 | ViewStyle | no | iOS/Android | yes | +| thumbTintColor | 拇指颜色 | string | no | iOS/Android | yes | +| trackStyle | 轨道样式 | ViewStyle | no | iOS/Android | yes | +| useGap | 如果为 true，最小值和最大值的拇指将不会重叠 | boolean | no | iOS/Android | yes | +| useRange | 如果为 true，Slider 将显示第二个拇指用于最小值 | boolean | no | iOS/Android | yes | +| value | 初始值 | number | no | iOS/Android | yes | **Incubator.Toast**：非中断式弹窗组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| action | A single action for the user (showLoader will override this) | ButtonProps | no | iOS/Android | yes | -| autoDismiss | Time of milliseconds to automatically invoke the onDismiss callback | number | no | iOS/Android | yes | -| backgroundColor | The toast background color | string | no | iOS/Android | yes | -| centerMessage | Should message be centered in the toast | boolean | no | iOS/Android | yes | -| containerStyle | Toast container style | ViewStyle | no | iOS/Android | yes | -| elevation | Android only. Custom elevation | number | no | Android | no | -| enableHapticFeedback | Whether to trigger an haptic feedback once the toast is shown (requires react-native-haptic-feedback dependency) | boolean | no | iOS/Android | yes | -| icon | A custom icon to render on the left side of the toast | ImageSourcePropType | no | iOS/Android | yes | -| iconColor | The icon color | string | no | iOS/Android | yes | -| message | Toast message | string | no | iOS/Android | yes | -| messageProps | Toast message props | TextProps | no | iOS/Android | yes | -| messageStyle | Toast message style | StyleProp | no | iOS/Android | yes | -| onAnimationEnd | Callback for end of toast animation | (visible?: boolean) => void | no | iOS/Android | yes | -| onDismiss | Callback for the toast dismissal | () => void | no | iOS/Android | yes | -| position | The position of the toast. 'top' or 'bottom'. | 'top' \| 'bottom' | no | iOS/Android | yes | -| preset | Pass to have preset UI | ToastPreset ('success' \| 'failure' \| 'general' \| 'offline') | no | iOS/Android | yes | -| renderAttachment | Render a custom view that will appear permanently above or below a Toast, depends on the Toast's position and animate with it when the Toast is made visible or dismissed | () => JSX.Element \| undefined | no | iOS/Android | yes | -| showLoader | Whether to show a loader | boolean | no | iOS/Android | yes | -| style | Toast style | ViewStyle | no | iOS/Android | yes | -| swipeable | Whether to support dismissing the toast with a swipe gesture. Requires to pass onDismiss method to control visibility | boolean | no | iOS/Android | yes | -| testID | The component test id | string | no | iOS/Android | yes | -| visible | Whether to show or hide the toast | boolean | no | iOS/Android | yes | -| zIndex | Custom zIndex for toast | number | no | iOS/Android | yes | +| action | 用户的单个操作（showLoader 将覆盖此操作） | ButtonProps | no | iOS/Android | yes | +| autoDismiss | 自动调用 onDismiss 回调的毫秒时间 | number | no | iOS/Android | yes | +| backgroundColor | Toast 的背景颜色 | string | no | iOS/Android | yes | +| centerMessage | 消息是否应在 Toast 中居中 | boolean | no | iOS/Android | yes | +| containerStyle | Toast 容器样式 | ViewStyle | no | iOS/Android | yes | +| elevation | 仅限 Android。自定义高程 | number | no | Android | no | +| enableHapticFeedback | 是否在 Toast 显示时触发触觉反馈（需要 react-native-haptic-feedback 依赖） | boolean | no | iOS/Android | yes | +| icon | 在 Toast 左侧渲染的自定义图标 | ImageSourcePropType | no | iOS/Android | yes | +| iconColor | 图标颜色 | string | no | iOS/Android | yes | +| message | Toast 消息 | string | no | iOS/Android | yes | +| messageProps | Toast 消息属性 | TextProps | no | iOS/Android | yes | +| messageStyle | Toast 消息样式 | StyleProp | no | iOS/Android | yes | +| onAnimationEnd | Toast 动画结束时的回调 | (visible?: boolean) => void | no | iOS/Android | yes | +| onDismiss | Toast 关闭时的回调 | () => void | no | iOS/Android | yes | +| position | Toast 的位置。'top' 或 'bottom'。 | 'top' \| 'bottom' | no | iOS/Android | yes | +| preset | 传递以使用预设 UI | ToastPreset ('success' \| 'failure' \| 'general' \| 'offline') | no | iOS/Android | yes | +| renderAttachment | 渲染一个自定义视图，该视图将永久显示在 Toast 的上方或下方，取决于 Toast 的位置，并在 Toast 可见或关闭时随之动画 | () => JSX.Element \| undefined | no | iOS/Android | yes | +| showLoader | 是否显示加载器 | boolean | no | iOS/Android | yes | +| style | Toast 样式 | ViewStyle | no | iOS/Android | yes | +| swipeable | 是否支持通过滑动手势关闭 Toast。需要传递 onDismiss 方法来控制可见性 | boolean | no | iOS/Android | yes | +| testID | 组件测试 ID | string | no | iOS/Android | yes | +| visible | 是否显示或隐藏 Toast | boolean | no | iOS/Android | yes | +| zIndex | Toast 的自定义 zIndex | number | no | iOS/Android | yes | **Dash**：阔折现组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | ------------------------------------- | --------- | -------- | ----------- | ----------------- | -| color | The color of the dashes | string | no | iOS/Android | yes | -| containerStyle | The container style | ViewStyle | no | iOS/Android | yes | -| gap | The gap between the dashes | number | no | iOS/Android | yes | -| length | The length of the dashes | number | no | iOS/Android | yes | -| style | Additional style to the dashes | ViewStyle | no | iOS/Android | yes | -| thickness | The thickness of the dashes | number | no | iOS/Android | yes | -| vertical | Is the dashed line should be vertical | boolean | no | iOS/Android | yes | +| color | 虚线的颜色 | string | no | iOS/Android | yes | +| containerStyle | 容器样式 | ViewStyle | no | iOS/Android | yes | +| gap | 虚线之间的间距 | number | no | iOS/Android | yes | +| length | 虚线的长度 | number | no | iOS/Android | yes | +| style | 虚线的额外样式 | ViewStyle | no | iOS/Android | yes | +| thickness | 虚线的厚度 | number | no | iOS/Android | yes | +| vertical | 虚线是否应为垂直 | boolean | no | iOS/Android | yes | **ExpandableSection**：展开收起组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | -------------------------------------------------------- | --------------- | -------- | ----------- | ----------------- | -| children | The expandable's children | React.ReactNode | no | iOS/Android | yes | -| expanded | Should the ExpandableSection be expanded | boolean | no | iOS/Android | yes | -| onPress | Called when pressing the header of the ExpandableSection | () => void | no | iOS/Android | yes | -| sectionHeader | Header element | JSX.Element | no | iOS/Android | yes | -| testID | testing identifier | string | no | iOS/Android | yes | -| top | Should it open above the 'sectionHeader' | boolean | no | iOS/Android | yes | +| children | 可展开的子项 | React.ReactNode | no | iOS/Android | yes | +| expanded | ExpandableSection 是否应展开 | boolean | no | iOS/Android | yes | +| onPress | 当按下 ExpandableSection 的标题时调用 | () => void | no | iOS/Android | yes | +| sectionHeader | 标题元素 | JSX.Element | no | iOS/Android | yes | +| testID | 测试标识符 | string | no | iOS/Android | yes | +| top | 是否应在 'sectionHeader' 上方打开 | boolean | no | iOS/Android | yes | **Fader**：渐变淡入淡出组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------- | -------------------------------------------------- | ------------------------------ | -------- | ----------- | ----------------- | -| position | The position of the fader (the image is different) | START \|END \| TOP \| BOTTOM | no | iOS/Android | yes | -| size | change the size of the fade view | number | no | iOS/Android | yes | -| tintColor | Change the tint color of the fade view | string | no | iOS/Android | yes | -| visible | Whether the fader is visible (default is true) | boolean | no | iOS/Android | yes | +| position | 淡入淡出器的位置（图像不同） | START \|END \| TOP \| BOTTOM | no | iOS/Android | yes | +| size | 更改淡入淡出视图的大小 | number | no | iOS/Android | yes | +| tintColor | 更改淡入淡出视图的色调颜色 | string | no | iOS/Android | yes | +| visible | 淡入淡出器是否可见（默认为 true） | boolean | no | iOS/Android | yes | **Gradient**：渐变色组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | --------------------------------- | ------------- | -------- | ----------- | ----------------- | -| color | The color of the gradient | string | no | iOS/Android | yes | -| numberOfSteps | The number of steps | number | no | iOS/Android | yes | -| style | Additional style to the component | ViewStyle | no | iOS/Android | yes | -| type | hue \| lightness \| saturation | GradientTypes | no | iOS/Android | yes | +| color | 渐变的颜色 | string | no | iOS/Android | yes | +| numberOfSteps | 步数 | number | no | iOS/Android | yes | +| style | 组件的额外样式 | ViewStyle | no | iOS/Android | yes | +| type | 色调 \| 亮度 \| 饱和度 | GradientTypes | no | iOS/Android | yes | **KeyboardAccessoryView**：键盘附件视图。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------ | ------------------------ | -------- | ----------- | ----------------- | -| kbComponent | The keyboard ID (the componentID sent to KeyboardRegistry) | string | no | iOS/Android | no | -| kbInitialProps | The props that will be sent to the KeyboardComponent | any | no | iOS/Android | no | -| kbInputRef | iOS only. The reference to the actual text input (or the keyboard may not reset when instructed to, etc.). | any | no | iOS | no | -| onHeightChanged | A callback for when the height is changed | (height: number) => void | no | iOS/Android | no | -| onItemSelected | Callback that will be called when an item on the keyboard has been pressed. | () => void | no | iOS/Android | no | -| onKeyboardResigned | Callback that will be called once the keyboard has been closed | () => void | no | iOS/Android | no | -| onRequestShowKeyboard | Callback that will be called if KeyboardRegistry.requestShowKeyboard is called. | () => void | no | iOS/Android | no | -| renderContent | Content to be rendered above the keyboard | () => React.ReactElement | no | iOS/Android | yes | +| kbComponent | 键盘 ID（发送到 KeyboardRegistry 的 componentID） | string | no | iOS/Android | no | +| kbInitialProps | 将发送到 KeyboardComponent 的属性 | any | no | iOS/Android | no | +| kbInputRef | 仅限 iOS。实际文本输入的引用（否则键盘可能无法在指示时重置等）。 | any | no | iOS | no | +| onHeightChanged | 高度更改时的回调 | (height: number) => void | no | iOS/Android | no | +| onItemSelected | 当键盘上的项目被按下时将调用的回调。 | () => void | no | iOS/Android | no | +| onKeyboardResigned | 键盘关闭后将调用的回调 | () => void | no | iOS/Android | no | +| onRequestShowKeyboard | 如果调用 KeyboardRegistry.requestShowKeyboard 将调用的回调。 | () => void | no | iOS/Android | no | +| renderContent | 在键盘上方渲染的内容 | () => React.ReactElement | no | iOS/Android | yes | **KeyboardAwareInsetsView**：用于在使用键盘时添加插入，可能会隐藏部分屏幕，该组件扩展了[KeyboardTrackingView](https://wix.github.io/react-native-ui-lib/docs/components/infra/KeyboardTrackingView)属性，此组件仅适用与iOS。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------------- | ------------------------------------------------------------ | --------- | -------- | -------- | ----------------- | -| KeyboardAwareInsetsView | Used to add an inset when a keyboard is used and might hide part of the screen. | Component | no | iOS | no | +| KeyboardAwareInsetsView | 在使用键盘时添加插入，可能会隐藏部分屏幕。 | Component | no | iOS | no | **KeyboardRegistry**：用于注册键盘并在键盘上执行某些操作。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | ------------------------------------------------------------ | --------------- | -------- | ----------- | ----------------- | -| addListener | Add a listener for a callback. globalID (string) - ID that includes the componentID and the event name (i.e. if componentID='kb1' globalID='kb1.onItemSelected') callback (function) - the callback to be called when the said event happens | static function | no | iOS/Android | yes | -| getAllKeyboards | Get all keyboards | static function | no | iOS/Android | yes | -| getKeyboard | Get a specific keyboard componentID (string) - the ID of the keyboard. | static function | no | iOS/Android | yes | -| getKeyboards | Get keyboards by IDs componentIDs (string[]) - the ID of the keyboard. | static function | no | iOS/Android | yes | -| notifyListeners | Notify that an event has occurred. globalID (string) - ID that includes the componentID and the event name (i.e. if componentID='kb1' globalID='kb1.onItemSelected') args (object) - data to be sent to the listener. | static function | no | iOS/Android | yes | -| onItemSelected | Default event to be used for when an item on the keyboard has been pressed. componentID (string) - the ID of the keyboard. args (object) - data to be sent to the listener. | static function | no | iOS/Android | yes | -| registerKeyboard | Register a new keyboard. componentID (string) - the ID of the keyboard. generator (function) - a function for the creation of the keyboard. params (object) - to be returned when using other methods (i.e. getKeyboards and getAllKeyboards). | static function | no | iOS/Android | yes | -| removeListeners | Remove a listener for a callback. globalID (string) - ID that includes the componentID and the event name (i.e. if componentID='kb1' globalID='kb1.onItemSelected') | static function | no | iOS/Android | yes | -| requestShowKeyboard | Request to show the keyboard componentID (string) - the ID of the keyboard. | static function | no | iOS/Android | yes | - -**KeyboardTrackingView**：为该视图及其子视图启用“键盘跟踪”的 UI 组件。通常用于该视图内有 TextField 或 TextInput 的情况，该组件仅适用于iOS。 +| addListener | 为回调添加监听器。globalID（字符串）- 包含 componentID 和事件名称的 ID（例如，如果 componentID='kb1' globalID='kb1.onItemSelected'）callback（函数）- 当所述事件发生时调用的回调 | static function | no | iOS/Android | yes | +| getAllKeyboards | 获取所有键盘 | static function | no | iOS/Android | yes | +| getKeyboard | 获取特定键盘 componentID（字符串）- 键盘的 ID。 | static function | no | iOS/Android | yes | +| getKeyboards | 按 ID 获取键盘 componentIDs（字符串[]）- 键盘的 ID。 | static function | no | iOS/Android | yes | +| notifyListeners | 通知事件已发生。globalID（字符串）- 包含 componentID 和事件名称的 ID（例如，如果 componentID='kb1' globalID='kb1.onItemSelected'）args（对象）- 要发送给监听器的数据。 | static function | no | iOS/Android | yes | +| onItemSelected | 当键盘上的项目被按下时使用的默认事件。componentID（字符串）- 键盘的 ID。args（对象）- 要发送给监听器的数据。 | static function | no | iOS/Android | yes | +| registerKeyboard | 注册新键盘。componentID（字符串）- 键盘的 ID。generator（函数）- 用于创建键盘的函数。params（对象）- 在使用其他方法（即 getKeyboards 和 getAllKeyboards）时返回。 | static function | no | iOS/Android | yes | +| removeListeners | 为回调移除监听器。globalID（字符串）- 包含 componentID 和事件名称的 ID（例如，如果 componentID='kb1' globalID='kb1.onItemSelected'） | static function | no | iOS/Android | yes | +| requestShowKeyboard | 请求显示键盘 componentID（字符串）- 键盘的 ID。 | static function | no | iOS/Android | yes | + +**KeyboardTrackingView**：为该视图及其子视图启用"键盘跟踪"的 UI 组件。通常用于该视图内有 TextField 或 TextInput 的情况，该组件仅适用于iOS。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------------ | ------------------------------------------------------------ | --------- | -------- | -------- | ----------------- | -| addBottomView | Add a view beneath the KeyboardAccessoryView. | boolean | no | iOS | no | -| allowHitsOutsideBounds | Allow hitting sub-views that are placed beyond the view bounds. | boolean | no | iOS | no | -| bottomViewColor | The bottom view's color. | string | no | iOS | no | -| manageScrollView | Set to false to turn off inset management and manage it yourself. | boolean | no | iOS | no | -| ref | Ref | any | no | iOS | no | -| requiresSameParentToManageScrollView | Set to true manageScrollView is set to true and still does not work, it means that the ScrollView found is the wrong one and you'll have to have the KeyboardAccessoryView and the ScrollView as siblings and set this to true. | boolean | no | iOS | no | -| revealKeyboardInteractive | Show the keyboard on a negative scroll. | boolean | no | iOS | no | -| scrollBehavior | The scrolling behavior (use KeyboardTrackingView. scrollBehaviors.NONE \|SCROLL_TO_BOTTOM_INVERTED_ONLY \| FIXED_OFFSET) | number | no | iOS | no | -| scrollToFocusedInput | Should the scrollView scroll to the focused input | boolean | no | iOS | no | -| style | Style | ViewStyle | no | iOS | no | -| trackInteractive | Enables tracking of the keyboard when it's dismissed interactively (false by default). Why? When using an external keyboard (BT), you still get the keyboard events and the view just hovers when you focus the input. Also, if you're not using interactive style of dismissing the keyboard (or if you don't have an input inside this view) it doesn't make sense to track it anyway. (This is caused because of the usage of inputAccessory to be able to track the keyboard interactive change and it introduces this bug) | boolean | no | iOS | no | -| useSafeArea | Whether or not to handle SafeArea. | boolean | no | iOS | no | -| usesBottomTabs | Whether or not to include bottom tab bar inset. | boolean | no | iOS | no | +| addBottomView | 在 KeyboardAccessoryView 下方添加视图。 | boolean | no | iOS | no | +| allowHitsOutsideBounds | 允许命中放置在视图边界之外的子视图。 | boolean | no | iOS | no | +| bottomViewColor | 底部视图的颜色。 | string | no | iOS | no | +| manageScrollView | 设置为 false 以关闭插入管理并自行管理。 | boolean | no | iOS | no | +| ref | 引用 | any | no | iOS | no | +| requiresSameParentToManageScrollView | 如果 manageScrollView 设置为 true 但仍然不起作用，则设置为 true，这意味着找到的 ScrollView 是错误的，您必须将 KeyboardAccessoryView 和 ScrollView 作为兄弟节点并设置此项为 true。 | boolean | no | iOS | no | +| revealKeyboardInteractive | 在负滚动时显示键盘。 | boolean | no | iOS | no | +| scrollBehavior | 滚动行为（使用 KeyboardTrackingView. scrollBehaviors.NONE \|SCROLL_TO_BOTTOM_INVERTED_ONLY \| FIXED_OFFSET） | number | no | iOS | no | +| scrollToFocusedInput | ScrollView 是否应滚动到聚焦的输入 | boolean | no | iOS | no | +| style | 样式 | ViewStyle | no | iOS | no | +| trackInteractive | 在键盘以交互方式关闭时启用跟踪（默认为 false）。为什么？当使用外部键盘（BT）时，您仍然会收到键盘事件，并且当您聚焦输入时视图只是悬停。此外，如果您不使用交互式关闭键盘的样式（或者如果您在此视图内没有输入），无论如何跟踪它都没有意义。（这是由于使用 inputAccessory 能够跟踪键盘交互更改而导致的，它引入了这个错误） | boolean | no | iOS | no | +| useSafeArea | 是否处理 SafeArea。 | boolean | no | iOS | no | +| usesBottomTabs | 是否包括底部标签栏插入。 | boolean | no | iOS | no | **Overlay**：带类型覆盖视图，为Image组件属性，扩展了[image](https://reactnative.dev/docs/image)组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | --------------------------------------------------------- | ----------------------------------------------------- | -------- | ----------- | ----------------- | -| color | The overlay color | string | no | iOS/Android | yes | -| customContent | Custom overlay content to be rendered on top of the image | JSX.Element | no | iOS/Android | yes | -| intensity | The intensity of the gradient. | low \|medium \|high | no | iOS/Android | yes | -| type | The type of overlay to set on top of the image | vertical \| top \| bottom \| solid (OverlayTypeType) | no | iOS/Android | yes | +| color | 覆盖颜色 | string | no | iOS/Android | yes | +| customContent | 在图像顶部渲染的自定义覆盖内容 | JSX.Element | no | iOS/Android | yes | +| intensity | 渐变的强度。 | low \|medium \|high | no | iOS/Android | yes | +| type | 设置在图像顶部的覆盖类型 | vertical \| top \| bottom \| solid (OverlayTypeType) | no | iOS/Android | yes | **Card**：卡片组件，扩展了[TouchableOpacity](https://wix.github.io/react-native-ui-lib/docs/components/basic/TouchableOpacity)组件，依赖[@react-native-community/blur](/zh-cn/react-native-community-blur.md)。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ------------------------------------------------------------ | -------------------- | -------- | ----------- | ----------------- | -| blurOptions | Blur options for blur effect according to @react-native-community/blur lib (make sure enableBlur is on) | object | no | iOS/Android | yes | -| borderRadius | Card border radius (will be passed to inner Card.Image component) | number | no | iOS/Android | yes | -| containerStyle | Additional styles for the card container | ViewStyle | no | iOS/Android | yes | -| elevation | Android only. Elevation value | number | no | Android | no | -| enableBlur | iOS only. Enable blur effect | boolean | no | iOS | no | -| enableShadow | Whether the card should have shadow or not | boolean | no | iOS/Android | yes | -| height | Card custom height | number \| string | no | iOS/Android | yes | -| onPress | Callback function for card press event | function | no | iOS/Android | yes | -| row | Should inner card flow direction be horizontal | boolean | no | iOS/Android | yes | -| selected | Adds visual indication that the card is selected | boolean | no | iOS/Android | yes | -| selectionOptions | Custom options for styling the selection indication | CardSelectionOptions | no | iOS/Android | yes | -| width | Card custom width | number \| string | no | iOS/Android | yes | +| blurOptions | 根据 @react-native-community/blur 库的模糊效果选项（确保 enableBlur 开启） | object | no | iOS/Android | yes | +| borderRadius | 卡片边框半径（将传递给内部 Card.Image 组件） | number | no | iOS/Android | yes | +| containerStyle | 卡片容器的额外样式 | ViewStyle | no | iOS/Android | yes | +| elevation | 仅限 Android。高程值 | number | no | Android | no | +| enableBlur | 仅限 iOS。启用模糊效果 | boolean | no | iOS | no | +| enableShadow | 卡片是否应有阴影 | boolean | no | iOS/Android | yes | +| height | 卡片自定义高度 | number \| string | no | iOS/Android | yes | +| onPress | 卡片按下事件的回调函数 | function | no | iOS/Android | yes | +| row | 内部卡片流动方向是否应为水平 | boolean | no | iOS/Android | yes | +| selected | 添加视觉指示表明卡片被选中 | boolean | no | iOS/Android | yes | +| selectionOptions | 样式化选择指示的自定义选项 | CardSelectionOptions | no | iOS/Android | yes | +| width | 卡片自定义宽度 | number \| string | no | iOS/Android | yes | **Card.Image**：Card 组件的内部组件（最好是直接子组件），扩展了[Image](https://wix.github.io/react-native-ui-lib/docs/components/media/Image)组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | -| height | Height | number | no | iOS/Android | yes | -| position | The Image position which determines the appropriate flex-ness of the image and border radius (for Android) this prop derived automatically from Card parent component if it rendered as a direct child of the Card component | string[] | no | iOS/Android | yes | -| width | Width | number | no | iOS/Android | yes | +| height | 高度 | number | no | iOS/Android | yes | +| position | 图像位置，确定图像的适当弹性度和边框半径（对于 Android）如果作为 Card 父组件的直接子组件渲染，则此属性会自动从 Card 父组件派生 | string[] | no | iOS/Android | yes | +| width | 宽度 | number | no | iOS/Android | yes | **Card.Section**：用于在 Card 组件内轻松渲染内容的内部组件，扩展了[View](https://wix.github.io/react-native-ui-lib/docs/components/basic/View)组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ------------------------------------------------------------ | ------------------- | -------- | ----------- | ----------------- | -| backgroundColor | Background color | string | no | iOS/Android | yes | -| content | Text content. Example: content={[{text: 'You’re Invited!', text70: true, grey10: true}]} | ContentType[] | no | iOS/Android | yes | -| contentStyle | Component's container style | ViewStyle | no | iOS/Android | yes | -| imageProps | Other image props that will be passed to the image | ImageProps | no | iOS/Android | yes | -| imageSource | Will be used for the background when provided | ImageSourcePropType | no | iOS/Android | yes | -| imageStyle | The style for the background image | ImageStyle | no | iOS/Android | yes | -| leadingIcon | Image props for a leading icon to render before the text | ImageProps | no | iOS/Android | yes | -| trailingIcon | Image props for a trailing icon to render after the text | ImageProps | no | iOS/Android | yes | +| backgroundColor | 背景颜色 | string | no | iOS/Android | yes | +| content | 文本内容。示例：content={[{text: 'You’re Invited!', text70: true, grey10: true}]} | ContentType[] | no | iOS/Android | yes | +| contentStyle | 组件的容器样式 | ViewStyle | no | iOS/Android | yes | +| imageProps | 将传递给图像的其他图像属性 | ImageProps | no | iOS/Android | yes | +| imageSource | 提供时将用作背景 | ImageSourcePropType | no | iOS/Android | yes | +| imageStyle | 背景图像的样式 | ImageStyle | no | iOS/Android | yes | +| leadingIcon | 在文本之前渲染的前导图标的图像属性 | ImageProps | no | iOS/Android | yes | +| trailingIcon | 在文本之后渲染的尾随图标的图像属性 | ImageProps | no | iOS/Android | yes | **Carousel**：轮播组件，扩展了[ScrollView](https://reactnative.dev/docs/scrollview)组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------- | ------------------------------------------------------------ | --------------------------------------- | -------- | ----------- | ----------------- | -| allowAccessibleLayout | Whether to layout Carousel for accessibility | boolean | no | iOS/Android | yes | -| animated | Should the container be animated (send the animation style via containerStyle) | boolean | no | iOS/Android | yes | -| animatedScrollOffset | Pass to attach to ScrollView's Animated.event in order to animated elements base on Carousel scroll offset (pass new Animated.ValueXY()) | Animated.ValueXY | no | iOS/Android | yes | -| autoplay | Enable to switch automatically between the pages | boolean | no | iOS/Android | yes | -| autoplayInterval | Time is ms to wait before switching to the next page (requires 'autoplay' to be enabled) | number | no | iOS/Android | yes | -| containerMarginHorizontal | Horizontal margin for the carousel container | number | no | iOS/Android | yes | -| containerPaddingVertical | Vertical padding for the carousel container (Sometimes needed when there are overflows that are cut in Android). | number | no | iOS/Android | yes | -| containerStyle | The carousel container style | ViewStyle | no | iOS/Android | yes | -| counterTextStyle | The counter's text style | ViewStyle | no | iOS/Android | yes | -| horizontal | Whether pages will be rendered horizontally or vertically | boolean | no | iOS/Android | yes | -| initialPage | The initial page to start at | number | no | iOS/Android | yes | -| itemSpacings | The spacing between the pages | number | no | iOS/Android | yes | -| loop | If true, will have infinite scroll (works only for horizontal carousel) | boolean | no | iOS/Android | yes | -| onChangePage | Callback for page change event | (pageIndex, oldPageIndex, info) => void | no | iOS/Android | yes | -| onScroll | Attach a callback for onScroll event of the internal ScrollView | function | no | iOS/Android | yes | -| pageControlPosition | The position of the PageControl component ['over', 'under'], otherwise it won't display | PageControlPosition | no | iOS/Android | yes | -| pageControlProps | PageControl component props | PageControlProps | no | iOS/Android | yes | -| pageHeight | The page height (all pages should have the same height). | number | no | iOS/Android | yes | -| pageWidth | The page width (all pages should have the same width). Does not work if passing 'loop' prop | number | no | iOS/Android | yes | -| pagingEnabled | Will block multiple pages scroll (will not work with 'pageWidth' prop) | boolean | no | iOS/Android | yes | -| showCounter | Whether to show a page counter (will not work with 'pageWidth' prop) | boolean | no | iOS/Android | yes | +| allowAccessibleLayout | 是否为无障碍布局 Carousel | boolean | no | iOS/Android | yes | +| animated | 容器是否应动画化（通过 containerStyle 发送动画样式） | boolean | no | iOS/Android | yes | +| animatedScrollOffset | 传递以附加到 ScrollView 的 Animated.event，以便基于 Carousel 滚动偏移动画元素（传递新的 Animated.ValueXY()） | Animated.ValueXY | no | iOS/Android | yes | +| autoplay | 启用自动在页面之间切换 | boolean | no | iOS/Android | yes | +| autoplayInterval | 在切换到下一页之前等待的时间（毫秒）（需要启用 'autoplay'） | number | no | iOS/Android | yes | +| containerMarginHorizontal | Carousel 容器的水平边距 | number | no | iOS/Android | yes | +| containerPaddingVertical | Carousel 容器的垂直内边距（有时在 Android 中需要，当有溢出被截断时）。 | number | no | iOS/Android | yes | +| containerStyle | Carousel 容器样式 | ViewStyle | no | iOS/Android | yes | +| counterTextStyle | 计数器的文本样式 | ViewStyle | no | iOS/Android | yes | +| horizontal | 页面将水平渲染还是垂直渲染 | boolean | no | iOS/Android | yes | +| initialPage | 开始的初始页面 | number | no | iOS/Android | yes | +| itemSpacings | 页面之间的间距 | number | no | iOS/Android | yes | +| loop | 如果为 true，将具有无限滚动（仅适用于水平 Carousel） | boolean | no | iOS/Android | yes | +| onChangePage | 页面更改事件的回调 | (pageIndex, oldPageIndex, info) => void | no | iOS/Android | yes | +| onScroll | 为内部 ScrollView 的 onScroll 事件附加回调 | function | no | iOS/Android | yes | +| pageControlPosition | PageControl 组件的位置 ['over', 'under']，否则不会显示 | PageControlPosition | no | iOS/Android | yes | +| pageControlProps | PageControl 组件属性 | PageControlProps | no | iOS/Android | yes | +| pageHeight | 页面高度（所有页面应具有相同的高度）。 | number | no | iOS/Android | yes | +| pageWidth | 页面宽度（所有页面应具有相同的宽度）。如果传递 'loop' 属性则不起作用 | number | no | iOS/Android | yes | +| pagingEnabled | 将阻止多页面滚动（如果使用 'pageWidth' 属性则不起作用） | boolean | no | iOS/Android | yes | +| showCounter | 是否显示页面计数器（如果使用 'pageWidth' 属性则不起作用） | boolean | no | iOS/Android | yes | **LoaderScreen**：全屏显示组件，通常用于页面加载loading，扩展了[Activityindicator](https://reactnative.dev/docs/activityindicator)组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ------------------------------------------------------------ | ---------------- | -------- | ----------- | ----------------- | -| backgroundColor | Color of the loader background (only when passing 'overlay') | string | no | iOS/Android | yes | -| containerStyle | Custom container style | ViewStyle | no | iOS/Android | yes | -| customLoader | Custom loader | React.ReactChild | no | iOS/Android | yes | -| loaderColor | Color of the loading indicator | string | no | iOS/Android | yes | -| message | loader message | string | no | iOS/Android | yes | -| messageStyle | message style | TextStyle | no | iOS/Android | yes | -| overlay | Show the screen as an absolute overlay | boolean | no | iOS/Android | yes | +| backgroundColor | 加载器背景的颜色（仅在传递 'overlay' 时） | string | no | iOS/Android | yes | +| containerStyle | 自定义容器样式 | ViewStyle | no | iOS/Android | yes | +| customLoader | 自定义加载器 | React.ReactChild | no | iOS/Android | yes | +| loaderColor | 加载指示器的颜色 | string | no | iOS/Android | yes | +| message | 加载器消息 | string | no | iOS/Android | yes | +| messageStyle | 消息样式 | TextStyle | no | iOS/Android | yes | +| overlay | 将屏幕显示为绝对覆盖 | boolean | no | iOS/Android | yes | **StackAggregator**：堆栈聚合器组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------ | ---------------------------- | -------- | ----------- | ----------------- | -| buttonProps | Props passed to the 'show less' button | ButtonProps | no | iOS/Android | yes | -| children | Component Children | JSX.Element \| JSX.Element[] | no | iOS/Android | yes | -| collapsed | The initial state of the stack | boolean | no | iOS/Android | yes | -| containerStyle | The container style | ViewStyle | no | iOS/Android | yes | -| contentContainerStyle | The content container style | ViewStyle | no | iOS/Android | yes | -| disablePresses | A setting that disables pressability on cards | boolean | no | iOS/Android | yes | -| itemBorderRadius | The items border radius | number | no | iOS/Android | yes | -| onCollapseChanged | A callback for collapse state change (value is collapsed state) | (changed: boolean) => void | no | iOS/Android | yes | -| onCollapseWillChange | A callback for collapse state will change (value is future collapsed state) | (changed: boolean) => void | no | iOS/Android | yes | -| onItemPress | A callback for item press | (index: number) => void | no | iOS/Android | yes | +| buttonProps | 传递给"显示更少"按钮的属性 | ButtonProps | no | iOS/Android | yes | +| children | 组件子项 | JSX.Element \| JSX.Element[] | no | iOS/Android | yes | +| collapsed | 堆栈的初始状态 | boolean | no | iOS/Android | yes | +| containerStyle | 容器样式 | ViewStyle | no | iOS/Android | yes | +| contentContainerStyle | 内容容器样式 | ViewStyle | no | iOS/Android | yes | +| disablePresses | 禁用卡片可按下性的设置 | boolean | no | iOS/Android | yes | +| itemBorderRadius | 项目的边框半径 | number | no | iOS/Android | yes | +| onCollapseChanged | 折叠状态更改的回调（值是折叠状态） | (changed: boolean) => void | no | iOS/Android | yes | +| onCollapseWillChange | 折叠状态将要更改的回调（值是未来的折叠状态） | (changed: boolean) => void | no | iOS/Android | yes | +| onItemPress | 项目按下的回调 | (index: number) => void | no | iOS/Android | yes | **StateScreen**：显示全屏组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------- | ------------------------------------------------------------ | -------------- | -------- | ----------- | ----------------- | -| ctaLabel | Text to to show in the CTA button | string | no | iOS/Android | yes | -| imageSource | The image source that's showing at the top. use an image that was required locally | ImageURISource | no | iOS/Android | yes | -| onCtaPress | Action handler for CTA button | () => void | no | iOS/Android | yes | -| testID | Use to identify the container in tests | string | no | iOS/Android | yes | -| title | To to show as the title | string | no | iOS/Android | yes | +| ctaLabel | 在 CTA 按钮中显示的文本 | string | no | iOS/Android | yes | +| imageSource | 顶部显示的图像源。使用本地需要的图像 | ImageURISource | no | iOS/Android | yes | +| onCtaPress | CTA 按钮的操作处理程序 | () => void | no | iOS/Android | yes | +| testID | 用于在测试中标识容器 | string | no | iOS/Android | yes | +| title | 显示为标题 | string | no | iOS/Android | yes | -**Drawer**：抽屉组件，如果您的应用程序与 RNN 配合使用，则您的屏幕必须使用“react-native-gesture-handler”中的gestureHandlerRootHOC 进行包装。请参阅[这里](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation)。 +**Drawer**：抽屉组件，如果您的应用程序与 RNN 配合使用，则您的屏幕必须使用"react-native-gesture-handler"中的gestureHandlerRootHOC 进行包装。请参阅[这里](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation)。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------------- | ------------------------------------------------------------ | ----------------------------------------------------- | -------- | ----------- | ----------------- | -| bounciness | The drawer animation bounciness | number | no | iOS/Android | yes | -| customValue | Custom value of any type to pass on to the component and receive back in the action callbacks | any | no | iOS/Android | yes | -| disableHaptic | Whether to disable the haptic | boolean | no | iOS/Android | yes | -| fullLeftThreshold | Threshold for a left full swipe (0-1) | number | no | iOS/Android | yes | -| fullRightThreshold | Threshold for a right full swipe (0-1) | number | no | iOS/Android | yes | -| fullSwipeLeft | Whether to allow a full left swipe | boolean | no | iOS/Android | yes | -| fullSwipeRight | Whether to allow a full right swipe | boolean | no | iOS/Android | yes | -| itemsIconSize | The items' icon size | number | no | iOS/Android | yes | -| itemsMinWidth | Set a different minimum width | number | no | iOS/Android | yes | -| itemsTextStyle | The items' text style | TextStyle | no | iOS/Android | yes | -| itemsTintColor | The color for the text and icon tint of the items | string | no | iOS/Android | yes | -| leftItem | The bottom layer's item to appear when opened from the left (a single item) | ItemProps | no | iOS/Android | yes | -| onDragStart | Called when drag gesture starts | () => any | no | iOS/Android | yes | -| onFullSwipeLeft | Callback for left item full swipe | () => void | no | iOS/Android | yes | -| onFullSwipeRight | Callback for right item full swipe | () => void | no | iOS/Android | yes | -| onSwipeableWillClose | Callback for close action | () => void | no | iOS/Android | yes | -| onSwipeableWillOpen | Callback for open action | () => void | no | iOS/Android | yes | -| onToggleSwipeLeft | Callback for left item toggle swipe | () => {rowWidth, leftWidth, dragX, resetItemPosition} | no | iOS/Android | yes | -| onWillFullSwipeLeft | Callback for just before left item full swipe | () => void | no | iOS/Android | yes | -| onWillFullSwipeRight | Callback for just before right item full swipe | () => void | no | iOS/Android | yes | -| rightItems | The bottom layer's items to appear when opened from the right | ItemProps[] | no | iOS/Android | yes | -| style | Component's style | ViewStyle | no | iOS/Android | yes | -| testID | The test id for e2e tests | string | no | iOS/Android | yes | -| useNativeAnimations | Perform the animation in natively | boolean | no | iOS/Android | yes | +| bounciness | 抽屉动画的弹性度 | number | no | iOS/Android | yes | +| customValue | 传递给组件并在操作回调中接收的任何类型的自定义值 | any | no | iOS/Android | yes | +| disableHaptic | 是否禁用触觉 | boolean | no | iOS/Android | yes | +| fullLeftThreshold | 左全滑动的阈值（0-1） | number | no | iOS/Android | yes | +| fullRightThreshold | 右全滑动的阈值（0-1） | number | no | iOS/Android | yes | +| fullSwipeLeft | 是否允许左全滑动 | boolean | no | iOS/Android | yes | +| fullSwipeRight | 是否允许右全滑动 | boolean | no | iOS/Android | yes | +| itemsIconSize | 项目的图标大小 | number | no | iOS/Android | yes | +| itemsMinWidth | 设置不同的最小宽度 | number | no | iOS/Android | yes | +| itemsTextStyle | 项目的文本样式 | TextStyle | no | iOS/Android | yes | +| itemsTintColor | 项目的文本和图标色调的颜色 | string | no | iOS/Android | yes | +| leftItem | 从左侧打开时出现的底层项目（单个项目） | ItemProps | no | iOS/Android | yes | +| onDragStart | 当拖动手势开始时调用 | () => any | no | iOS/Android | yes | +| onFullSwipeLeft | 左项目全滑动的回调 | () => void | no | iOS/Android | yes | +| onFullSwipeRight | 右项目全滑动的回调 | () => void | no | iOS/Android | yes | +| onSwipeableWillClose | 关闭操作的回调 | () => void | no | iOS/Android | yes | +| onSwipeableWillOpen | 打开操作的回调 | () => void | no | iOS/Android | yes | +| onToggleSwipeLeft | 左项目切换滑动的回调 | () => {rowWidth, leftWidth, dragX, resetItemPosition} | no | iOS/Android | yes | +| onWillFullSwipeLeft | 左项目全滑动之前的回调 | () => void | no | iOS/Android | yes | +| onWillFullSwipeRight | 右项目全滑动之前的回调 | () => void | no | iOS/Android | yes | +| rightItems | 从右侧打开时出现的底层项目 | ItemProps[] | no | iOS/Android | yes | +| style | 组件的样式 | ViewStyle | no | iOS/Android | yes | +| testID | 用于端到端测试的测试 ID | string | no | iOS/Android | yes | +| useNativeAnimations | 在本机执行动画 | boolean | no | iOS/Android | yes | **GridList**：网格列表组件，扩展了[FlatList](https://reactnative.dev/docs/flatlist)组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------ | ----------------------------------- | -------- | ----------- | ----------------- | -| containerWidth | Pass when you want to use a custom container width for calculation | number | no | iOS/Android | yes | -| contentContainerStyle | Custom content container style | ScrollView[ contentContainerStyle ] | no | iOS/Android | yes | -| itemSpacing | Spacing between each item | number | no | iOS/Android | yes | -| keepItemSize | whether to keep the items initial size when orientation changes, in which case the apt number of columns will be calculated automatically. | boolean | no | iOS/Android | yes | -| listPadding | List padding (used for item size calculation) | number | no | iOS/Android | yes | -| maxItemWidth | Allow a responsive item width to the maximum item width | number | no | iOS/Android | yes | -| numColumns | Number of items to show in a row (ignored when passing maxItemWidth) | number | no | iOS/Android | yes | +| containerWidth | 当您想要使用自定义容器宽度进行计算时传递 | number | no | iOS/Android | yes | +| contentContainerStyle | 自定义内容容器样式 | ScrollView[ contentContainerStyle ] | no | iOS/Android | yes | +| itemSpacing | 每个项目之间的间距 | number | no | iOS/Android | yes | +| keepItemSize | 当方向更改时是否保持项目的初始大小，在这种情况下将自动计算适当的列数。 | boolean | no | iOS/Android | yes | +| listPadding | 列表内边距（用于项目大小计算） | number | no | iOS/Android | yes | +| maxItemWidth | 允许响应式项目宽度到最大项目宽度 | number | no | iOS/Android | yes | +| numColumns | 一行中显示的项目数（传递 maxItemWidth 时忽略） | number | no | iOS/Android | yes | **GridListItem**：单个网格视图/列表项组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------- | ----------------------------------------------------------- | ---------------------------------- | -------- | ----------- | ----------------- | -| alignToStart | Should content be align to start | boolean | no | iOS/Android | yes | -| containerProps | Props to pass on to the touchable container | TouchableOpacityProps \| ViewProps | no | iOS/Android | yes | -| containerStyle | Custom container style | ViewStyle | no | iOS/Android | yes | -| description | Description content text | string \| React.ReactElement | no | iOS/Android | yes | -| descriptionColor | Description content color | string | no | iOS/Android | yes | -| descriptionLines | Description content number of lines | number | no | iOS/Android | yes | -| descriptionTypography | Description content typography | string | no | iOS/Android | yes | -| horizontalAlignment | Content horizontal alignment | HorizontalAlignment | no | iOS/Android | yes | -| imageProps | Image props object for rendering an image item | ImageProps | no | iOS/Android | yes | -| itemSize | The item size | number \| ImageSize | no | iOS/Android | yes | -| onPress | The item's action handler | TouchableOpacityProps ['onPress'] | no | iOS/Android | yes | -| overlayText | Renders the title, subtitle and description inside the item | boolean | no | iOS/Android | yes | -| overlayTextContainerStyle | Custom container styling for inline text | ViewStyle | no | iOS/Android | yes | -| renderCustomItem | Custom GridListItem to be rendered in the GridView | () => React.ReactElement | no | iOS/Android | yes | -| renderOverlay | Renders an overlay on top of the image | () => React.ReactElement | no | iOS/Android | yes | -| subtitle | Subtitle content text | string \| React.ReactElement | no | iOS/Android | yes | -| subtitleColor | Subtitle content color | string | no | iOS/Android | yes | -| subtitleLines | Subtitle content number of lines | number | no | iOS/Android | yes | -| subtitleTypography | Subtitle content typography | string | no | iOS/Android | yes | -| testID | Test ID for component | string | no | iOS/Android | yes | -| title | Title content text | string \| React.ReactElement | no | iOS/Android | yes | -| titleColor | Title content color | string | no | iOS/Android | yes | -| titleLines | Title content number of lines | number | no | iOS/Android | yes | -| titleTypography | Title content typography | string | no | iOS/Android | yes | +| alignToStart | 内容是否应对齐到开始 | boolean | no | iOS/Android | yes | +| containerProps | 传递给可触摸容器的属性 | TouchableOpacityProps \| ViewProps | no | iOS/Android | yes | +| containerStyle | 自定义容器样式 | ViewStyle | no | iOS/Android | yes | +| description | 描述内容文本 | string \| React.ReactElement | no | iOS/Android | yes | +| descriptionColor | 描述内容颜色 | string | no | iOS/Android | yes | +| descriptionLines | 描述内容行数 | number | no | iOS/Android | yes | +| descriptionTypography | 描述内容排版 | string | no | iOS/Android | yes | +| horizontalAlignment | 内容水平对齐 | HorizontalAlignment | no | iOS/Android | yes | +| imageProps | 用于渲染图像项目的图像属性对象 | ImageProps | no | iOS/Android | yes | +| itemSize | 项目大小 | number \| ImageSize | no | iOS/Android | yes | +| onPress | 项目的操作处理程序 | TouchableOpacityProps ['onPress'] | no | iOS/Android | yes | +| overlayText | 在项目内部渲染标题、副标题和描述 | boolean | no | iOS/Android | yes | +| overlayTextContainerStyle | 内联文本的自定义容器样式 | ViewStyle | no | iOS/Android | yes | +| renderCustomItem | 在 GridView 中渲染的自定义 GridListItem | () => React.ReactElement | no | iOS/Android | yes | +| renderOverlay | 在图像顶部渲染覆盖层 | () => React.ReactElement | no | iOS/Android | yes | +| subtitle | 副标题内容文本 | string \| React.ReactElement | no | iOS/Android | yes | +| subtitleColor | 副标题内容颜色 | string | no | iOS/Android | yes | +| subtitleLines | 副标题内容行数 | number | no | iOS/Android | yes | +| subtitleTypography | 副标题内容排版 | string | no | iOS/Android | yes | +| testID | 组件测试 ID | string | no | iOS/Android | yes | +| title | 标题内容文本 | string \| React.ReactElement | no | iOS/Android | yes | +| titleColor | 标题内容颜色 | string | no | iOS/Android | yes | +| titleLines | 标题内容行数 | number | no | iOS/Android | yes | +| titleTypography | 标题内容排版 | string | no | iOS/Android | yes | **GridView**：网格视图组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------------- | ------------------------------------------------------------ | ----------------------------------------------- | -------- | ----------- | ----------------- | -| itemSpacing | Spacing between each item | number | no | iOS/Android | yes | -| items | The list of items based on GridListItem props | GridListItemProps[] | no | iOS/Android | yes | -| keepItemSize | whether to keep the items initial size when orientation changes, in which case the apt number of columns will be calculated automatically. | boolean | no | iOS/Android | yes | -| lastItemLabel | overlay label for the last item | string \| number | no | iOS/Android | yes | -| lastItemOverlayColor | color of overlay label for the last item | string | no | iOS/Android | yes | -| numColumns | Number of items to show in a row | number | no | iOS/Android | yes | -| renderCustomItem | Pass to render a custom item | (item: GridListItemProps) => React.ReactElement | no | iOS/Android | yes | -| viewWidth | pass the desired grid view width (will improve loading time) | number | no | iOS/Android | yes | +| itemSpacing | 每个项目之间的间距 | number | no | iOS/Android | yes | +| items | 基于 GridListItem 属性的项目列表 | GridListItemProps[] | no | iOS/Android | yes | +| keepItemSize | 当方向更改时是否保持项目的初始大小，在这种情况下将自动计算适当的列数。 | boolean | no | iOS/Android | yes | +| lastItemLabel | 最后一个项目的覆盖标签 | string \| number | no | iOS/Android | yes | +| lastItemOverlayColor | 最后一个项目的覆盖标签颜色 | string | no | iOS/Android | yes | +| numColumns | 一行中显示的项目数 | number | no | iOS/Android | yes | +| renderCustomItem | 传递以渲染自定义项目 | (item: GridListItemProps) => React.ReactElement | no | iOS/Android | yes | +| viewWidth | 传递所需的网格视图宽度（将改善加载时间） | number | no | iOS/Android | yes | **ListItem**：列表中列表项组件，该组件扩展了[TouchableOpacity](https://reactnative.dev/docs/touchableopacity)属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| containerElement | The container element to wrap the ListItem | React.ComponentType | no | iOS/Android | yes | -| containerStyle | Additional styles for the top container | ViewStyle | no | iOS/Android | yes | -| height | the list item height | ViewStyle['height'] | no | iOS/Android | yes | -| onLongPress | action for when long pressing the item | () => void | no | iOS/Android | yes | -| onPress | action for when pressing the item | () => void | no | iOS/Android | yes | -| style | The inner element style | ViewStyle | no | iOS/Android | yes | -| testID | The test id for e2e tests | string | no | iOS/Android | yes | -| underlayColor | The inner element pressed backgroundColor | string | no | iOS/Android | yes | +| containerElement | 包装 ListItem 的容器元素 | React.ComponentType | no | iOS/Android | yes | +| containerStyle | 顶部容器的额外样式 | ViewStyle | no | iOS/Android | yes | +| height | 列表项高度 | ViewStyle['height'] | no | iOS/Android | yes | +| onLongPress | 长按项目时的操作 | () => void | no | iOS/Android | yes | +| onPress | 按下项目时的操作 | () => void | no | iOS/Android | yes | +| style | 内部元素样式 | ViewStyle | no | iOS/Android | yes | +| testID | 用于端到端测试的测试 ID | string | no | iOS/Android | yes | +| underlayColor | 内部元素按下时的背景颜色 | string | no | iOS/Android | yes | **ListItem.Part**：用于在 ListItem 内进行布局的子 ListItem 组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | --------------------------------------------- | --------- | -------- | ----------- | ----------------- | -| column | this part content direction will be column | boolean | no | iOS/Android | yes | -| containerStyle | container style | ViewStyle | no | iOS/Android | yes | -| left | this part content will be aligned to left | boolean | no | iOS/Android | yes | -| middle | this part content will be aligned to spreaded | boolean | no | iOS/Android | yes | -| right | this part content will be aligned to right | boolean | no | iOS/Android | yes | -| row | this part content direction will be row | boolean | no | iOS/Android | yes | +| column | 此部分内容方向将为列 | boolean | no | iOS/Android | yes | +| containerStyle | 容器样式 | ViewStyle | no | iOS/Android | yes | +| left | 此部分内容将对齐到左 | boolean | no | iOS/Android | yes | +| middle | 此部分内容将对齐到展开 | boolean | no | iOS/Android | yes | +| right | 此部分内容将对齐到右 | boolean | no | iOS/Android | yes | +| row | 此部分内容方向将为行 | boolean | no | iOS/Android | yes | **SortableGridList**：可排序网格列表组件，该组件扩展了[GridList](https://wix.github.io/react-native-ui-lib/docs/components/lists/GridList)组件属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | ------------------------------------------------------------ | -------------------------------------------- | -------- | ----------- | ----------------- | -| data | Do not update 'data' in 'onOrderChange' (i.e. for each order change); only update it when you change the items (i.g. adding and removing an item). Data of items with an id prop as unique identifier | any[] & {id: string} | no | iOS/Android | yes | -| extraData | Pass any extra data that should trigger a re-render | any | no | iOS/Android | yes | -| onOrderChange | Order change callback | (newData: T[], newOrder: ItemsOrder) => void | no | iOS/Android | yes | -| renderItem | Custom render item callback | FlatListProps ['renderItem'] | no | iOS/Android | yes | +| data | 不要在 'onOrderChange' 中更新 'data'（即每次顺序更改时）；仅在更改项目时更新它（即添加和删除项目）。具有 id 属性作为唯一标识符的项目数据 | any[] & {id: string} | no | iOS/Android | yes | +| extraData | 传递任何应触发重新渲染的额外数据 | any | no | iOS/Android | yes | +| onOrderChange | 顺序更改回调 | (newData: T[], newOrder: ItemsOrder) => void | no | iOS/Android | yes | +| renderItem | 自定义渲染项目回调 | FlatListProps ['renderItem'] | no | iOS/Android | yes | **SortableList**：可排序列表组件，该组件扩展了[FlatList](https://reactnative.dev/docs/flatlist)组件属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| data | Do not update 'data' in 'onOrderChange' (i.e. for each order change); only update it when you change the items (i.g. adding and removing an item).The data of the list, with an id prop as unique identifier. | ItemT[] (ItemT extends {id: string}) | no | iOS/Android | yes | -| enableHaptic | Whether to enable the haptic feedback. (please note that react-native-haptic-feedback does not support the specific haptic type on Android starting on an unknown version, you can use 1.8.2 for it to work properly) | boolean | no | iOS/Android | yes | -| itemProps | Extra props for the item. | {margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}} | no | iOS/Android | yes | -| onOrderChange | A callback to get the new order (or swapped items). | (data: ItemT[]) => void | no | iOS/Android | yes | -| scale | Scale the item once dragged. | number | no | iOS/Android | yes | +| data | 不要在 'onOrderChange' 中更新 'data'（即每次顺序更改时）；仅在更改项目时更新它（即添加和删除项目）。列表的数据，具有 id 属性作为唯一标识符。 | ItemT[] (ItemT extends {id: string}) | no | iOS/Android | yes | +| enableHaptic | 是否启用触觉反馈。（请注意，react-native-haptic-feedback 从某个未知版本开始不支持 Android 上的特定触觉类型，您可以使用 1.8.2 使其正常工作） | boolean | no | iOS/Android | yes | +| itemProps | 项目的额外属性。 | {margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}} | no | iOS/Android | yes | +| onOrderChange | 获取新顺序（或交换项目）的回调。 | (data: ItemT[]) => void | no | iOS/Android | yes | +| scale | 拖动时缩放项目。 | number | no | iOS/Android | yes | **Timeline**：时间线组件，该组件扩展了[View](https://reactnative.dev/docs/view)组件属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ------------------------------------------------------------ | ---------------------------------- | -------- | ----------- | ----------------- | -| backgroundColor | Background color for the item | string | no | iOS/Android | yes | -| bottomLine | The bottom line props | LineProps | no | iOS/Android | yes | -| point | The point props | PointProps | no | iOS/Android | yes | -| renderContent | Custom content to render right to the timeline indicator | any | no | iOS/Android | yes | -| state | The state of the timeline. Will affect the color of the indication (use static 'states') | current \| next \| error \|success | no | iOS/Android | yes | -| testID | The test id for e2e tests | string | no | iOS/Android | yes | -| topLine | The top line props | LineProps | no | iOS/Android | yes | +| backgroundColor | 项目的背景颜色 | string | no | iOS/Android | yes | +| bottomLine | 底部线的属性 | LineProps | no | iOS/Android | yes | +| point | 点的属性 | PointProps | no | iOS/Android | yes | +| renderContent | 渲染到时间线指示器右侧的自定义内容 | any | no | iOS/Android | yes | +| state | 时间线的状态。将影响指示的颜色（使用静态 'states'） | current \| next \| error \|success | no | iOS/Android | yes | +| testID | 用于端到端测试的测试 ID | string | no | iOS/Android | yes | +| topLine | 顶部线的属性 | LineProps | no | iOS/Android | yes | **AnimatedImage**：图像加载后以动画淡入的图像组件，该组件扩展了[Image](https://wix.github.io/react-native-ui-lib/docs/components/media/Image)组件属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------------------- | -------------------------------------------------------- | ----------- | -------- | ----------- | ----------------- | -| animationDuration | Duration for the fade animation when the image is loaded | number | no | iOS/Android | yes | -| containerStyle | Additional spacing styles for the container | ViewStyle | no | iOS/Android | yes | -| loader | A component to render while the image is loading | JSX.element | no | iOS/Android | yes | -| onLoadStart7.43.1+ | On load start callback | () => void | no | iOS/Android | yes | +| animationDuration | 图像加载时淡入动画的持续时间 | number | no | iOS/Android | yes | +| containerStyle | 容器的额外间距样式 | ViewStyle | no | iOS/Android | yes | +| loader | 图像加载时渲染的组件 | JSX.element | no | iOS/Android | yes | +| onLoadStart7.43.1+ | 加载开始回调 | () => void | no | iOS/Android | yes | **AnimatedScanner**：该组件扩展了[Animated.View](https://reactnative.dev/docs/animated)组件属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | -------------------------------------------------------- | ---------------------------- | -------- | ----------- | ----------------- | -| backgroundColor | Background color | string | no | iOS/Android | yes | -| containerStyle | Component's container style | ViewStyle | no | iOS/Android | yes | -| duration | Duration of current break (can be change between breaks) | number | no | iOS/Android | yes | -| hideScannerLine | Whether to hide the scanner line | boolean | no | iOS/Android | yes | -| onBreakpoint | Breakpoint callback | ({progress, isDone}) => void | no | iOS/Android | yes | -| opacity | Opacity | number | no | iOS/Android | yes | -| progress | Animated value between 0 and 100 | number | no | iOS/Android | yes | -| testID | Used as a testing identifier | string | no | iOS/Android | yes | +| backgroundColor | 背景颜色 | string | no | iOS/Android | yes | +| containerStyle | 组件的容器样式 | ViewStyle | no | iOS/Android | yes | +| duration | 当前中断的持续时间（可以在中断之间更改） | number | no | iOS/Android | yes | +| hideScannerLine | 是否隐藏扫描线 | boolean | no | iOS/Android | yes | +| onBreakpoint | 断点回调 | ({progress, isDone}) => void | no | iOS/Android | yes | +| opacity | 不透明度 | number | no | iOS/Android | yes | +| progress | 0 到 100 之间的动画值 | number | no | iOS/Android | yes | +| testID | 用作测试标识符 | string | no | iOS/Android | yes | **Avatar**：头像组件，该组件扩展了[TouchableOpacity](https://wix.github.io/react-native-ui-lib/docs/components/basic/TouchableOpacity)，[Image](https://wix.github.io/react-native-ui-lib/docs/components/media/Image)组件属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------- | -------- | ----------- | ----------------- | -| animate | Adds fade in animation when Avatar image loads | boolean | no | iOS/Android | yes | -| autoColorsConfig | Send this to use the name to infer a backgroundColor | AutoColorsProps | no | iOS/Android | yes | -| backgroundColor | Background color for Avatar | string | no | iOS/Android | yes | -| badgePosition | Badge location on Avatar | TOP_RIGHT \|TOP_LEFT \|BOTTOM_RIGHT \|BOTTOM_LEFT | no | iOS/Android | yes | -| badgeProps | Badge props passed down to Badge component | BadgeProps | no | iOS/Android | yes | -| containerStyle | Additional spacing styles for the container | ViewStyle | no | iOS/Android | yes | -| customRibbon | Custom ribbon | JSX.Element | no | iOS/Android | yes | -| imageProps | Image props object | ImageProps | no | iOS/Android | yes | -| imageStyle | Image style object used to pass additional style props by components which render image | ImageStyle | no | iOS/Android | yes | -| isOnline | Determine if to show online badge | boolean | no | iOS/Android | yes | -| label | Label that can represent initials | string | no | iOS/Android | yes | -| labelColor | The label color | string | no | iOS/Android | yes | -| name | The name of the avatar user. If no label is provided, the initials will be generated from the name. autoColorsConfig will use the name to create the background color of the Avatar. | string | no | iOS/Android | yes | -| onImageLoadEnd | Listener-callback for when an image's (uri) loading either succeeds or fails (equiv. to Image.onLoadEnd()). | ImagePropsBase ['onLoadEnd'] | no | iOS/Android | yes | -| onImageLoadError | Listener-callback for when an image's (uri) loading fails (equiv. to Image.onError()). | ImagePropsBase ['onError'] | no | iOS/Android | yes | -| onImageLoadStart | Listener-callback for when an image's (uri) loading starts (equiv. to Image.onLoadStart()). | ImagePropsBase ['onLoadStart'] | no | iOS/Android | yes | -| onPress | Press handler | (props: any) => void | no | iOS/Android | yes | -| ribbonLabel | Ribbon label to display on the avatar | string | no | iOS/Android | yes | -| ribbonLabelStyle | Ribbon label custom style | TextStyle | no | iOS/Android | yes | -| ribbonStyle | Ribbon custom style | ViewStyle | no | iOS/Android | yes | -| size | Custom size for the Avatar | number | no | iOS/Android | yes | -| source | The image source (external or from assets) | ImageSourcePropType | no | iOS/Android | yes | -| status | AWAY, ONLINE, OFFLINE or NONE mode (if set to a value other then 'NONE' will override isOnline prop) | StatusModes | no | iOS/Android | yes | -| testID | Test identifier | string | no | iOS/Android | yes | -| useAutoColors | Hash the name (or label) to get a color, so each name will have a specific color. Default is false. | boolean | no | iOS/Android | yes | -| labelEllipsizeMode7.43.1+ | The ellipsize mode for the label, default is clip | TextProps['ellipsizeMode'] | no | iOS/Android | yes | +| animate | 当 Avatar 图像加载时添加淡入动画 | boolean | no | iOS/Android | yes | +| autoColorsConfig | 发送此项以使用名称推断 backgroundColor | AutoColorsProps | no | iOS/Android | yes | +| backgroundColor | Avatar 的背景颜色 | string | no | iOS/Android | yes | +| badgePosition | Avatar 上的徽章位置 | TOP_RIGHT \|TOP_LEFT \|BOTTOM_RIGHT \|BOTTOM_LEFT | no | iOS/Android | yes | +| badgeProps | 传递给 Badge 组件的徽章属性 | BadgeProps | no | iOS/Android | yes | +| containerStyle | 容器的额外间距样式 | ViewStyle | no | iOS/Android | yes | +| customRibbon | 自定义丝带 | JSX.Element | no | iOS/Android | yes | +| imageProps | 图像属性对象 | ImageProps | no | iOS/Android | yes | +| imageStyle | 用于通过组件传递额外样式属性的图像样式对象 | ImageStyle | no | iOS/Android | yes | +| isOnline | 确定是否显示在线徽章 | boolean | no | iOS/Android | yes | +| label | 可以表示首字母的标签 | string | no | iOS/Android | yes | +| labelColor | 标签颜色 | string | no | iOS/Android | yes | +| name | 头像用户的名称。如果未提供标签，将从名称生成首字母。autoColorsConfig 将使用名称创建 Avatar 的背景颜色。 | string | no | iOS/Android | yes | +| onImageLoadEnd | 当图像的（uri）加载成功或失败时的监听器回调（等同于 Image.onLoadEnd()）。 | ImagePropsBase ['onLoadEnd'] | no | iOS/Android | yes | +| onImageLoadError | 当图像的（uri）加载失败时的监听器回调（等同于 Image.onError()）。 | ImagePropsBase ['onError'] | no | iOS/Android | yes | +| onImageLoadStart | 当图像的（uri）加载开始时的监听器回调（等同于 Image.onLoadStart()）。 | ImagePropsBase ['onLoadStart'] | no | iOS/Android | yes | +| onPress | 按下处理程序 | (props: any) => void | no | iOS/Android | yes | +| ribbonLabel | 在头像上显示的丝带标签 | string | no | iOS/Android | yes | +| ribbonLabelStyle | 丝带标签自定义样式 | TextStyle | no | iOS/Android | yes | +| ribbonStyle | 丝带自定义样式 | ViewStyle | no | iOS/Android | yes | +| size | Avatar 的自定义大小 | number | no | iOS/Android | yes | +| source | 图像源（外部或来自资源） | ImageSourcePropType | no | iOS/Android | yes | +| status | AWAY、ONLINE、OFFLINE 或 NONE 模式（如果设置为 'NONE' 以外的值，将覆盖 isOnline 属性） | StatusModes | no | iOS/Android | yes | +| testID | 测试标识符 | string | no | iOS/Android | yes | +| useAutoColors | 哈希名称（或标签）以获取颜色，因此每个名称将具有特定颜色。默认为 false。 | boolean | no | iOS/Android | yes | +| labelEllipsizeMode7.43.1+ | 标签的省略号模式，默认为 clip | TextProps['ellipsizeMode'] | no | iOS/Android | yes | **Icon**：图标组件，该组件扩展了[Image](https://reactnative.dev/docs/image)组件属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------- | -------------------------------------------------------- | ----------------- | -------- | ----------- | ----------------- | -| assetGroup | the asset group, default is icons | string | no | iOS/Android | yes | -| assetName | if provided icon source will be driven from asset name | string | no | iOS/Android | yes | -| recorderTag | Recorder Tag | 'mask' \|'unmask' | no | iOS/Android | yes | -| size | The icon size | number | no | iOS/Android | yes | -| supportRTL | whether the image should flip horizontally on RTL locals | boolean | no | iOS/Android | yes | -| tintColor | The icon tint | string | no | iOS/Android | yes | +| assetGroup | 资源组，默认为 icons | string | no | iOS/Android | yes | +| assetName | 如果提供，图标源将从资源名称驱动 | string | no | iOS/Android | yes | +| recorderTag | 记录器标签 | 'mask' \|'unmask' | no | iOS/Android | yes | +| size | 图标大小 | number | no | iOS/Android | yes | +| supportRTL | 图像是否应在 RTL 本地环境中水平翻转 | boolean | no | iOS/Android | yes | +| tintColor | 图标色调 | string | no | iOS/Android | yes | **Image**：图片组件，该组件扩展了[Image](https://reactnative.dev/docs/image)组件属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------- | ------------------------------------------------------------ | ----------------------------------- | -------- | ----------- | ----------------- | -| aspectRatio | The aspect ratio for the image | number | no | iOS/Android | yes | -| assetGroup | the asset group, default is icons | string | no | iOS/Android | yes | -| assetName | if provided image source will be driven from asset name | string | no | iOS/Android | yes | -| cover | Show image as a cover, full width, image (according to aspect ratio, default: 16:8) | boolean | no | iOS/Android | yes | -| customOverlayContent | Render an overlay with custom content | JSX.Element | no | iOS/Android | yes | -| errorSource | Default image source in case of an error | ImageSourcePropType | no | iOS/Android | yes | -| imageId | An imageId that can be used in sourceTransformer logic | string | no | iOS/Android | yes | -| overlayColor | Pass a custom color for the overlay | string | no | iOS/Android | yes | -| overlayIntensity | OverlayIntensityType | LOW \|MEDIUM \|HIGH | no | iOS/Android | yes | -| overlayType | the image MUST have proper size, The type of overlay to place on top of the image. | VERTICAL \|TOP \|BOTTOM \|SOLID | no | iOS/Android | yes | -| recorderTag | Recorder Tag | 'mask' \| 'unmask' | no | iOS/Android | yes | -| sourceTransformer | custom source transform handler for manipulating the image source (great for size control) | (props: any) => ImageSourcePropType | no | iOS/Android | yes | -| supportRTL | whether the image should flip horizontally on RTL locals | boolean | no | iOS/Android | yes | -| tintColor | the asset tint | string | no | iOS/Android | yes | -| useBackgroundContainer | Use a container for the Image, this can solve issues on Android when animation needs to be performed on the same view; i.e. animation related crashes on Android. | boolean | no | iOS/Android | yes | +| aspectRatio | 图像的宽高比 | number | no | iOS/Android | yes | +| assetGroup | 资源组，默认为 icons | string | no | iOS/Android | yes | +| assetName | 如果提供，图像源将从资源名称驱动 | string | no | iOS/Android | yes | +| cover | 将图像显示为封面，全宽图像（根据宽高比，默认：16:8） | boolean | no | iOS/Android | yes | +| customOverlayContent | 渲染带有自定义内容的覆盖层 | JSX.Element | no | iOS/Android | yes | +| errorSource | 错误情况下的默认图像源 | ImageSourcePropType | no | iOS/Android | yes | +| imageId | 可以在 sourceTransformer 逻辑中使用的 imageId | string | no | iOS/Android | yes | +| overlayColor | 为覆盖层传递自定义颜色 | string | no | iOS/Android | yes | +| overlayIntensity | 覆盖强度类型 | LOW \|MEDIUM \|HIGH | no | iOS/Android | yes | +| overlayType | 图像必须具有适当的大小，设置在图像顶部的覆盖层类型。 | VERTICAL \|TOP \|BOTTOM \|SOLID | no | iOS/Android | yes | +| recorderTag | 记录器标签 | 'mask' \| 'unmask' | no | iOS/Android | yes | +| sourceTransformer | 用于操作图像源的自定义源转换处理程序（非常适合大小控制） | (props: any) => ImageSourcePropType | no | iOS/Android | yes | +| supportRTL | 图像是否应在 RTL 本地环境中水平翻转 | boolean | no | iOS/Android | yes | +| tintColor | 资源色调 | string | no | iOS/Android | yes | +| useBackgroundContainer | 为图像使用容器，这可以解决在需要对同一视图执行动画时 Android 上的问题；即 Android 上与动画相关的崩溃。 | boolean | no | iOS/Android | yes | **Marquee**：滑动文本组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | --------------------------------------- | ------------------ | -------- | ----------- | ----------------- | -| containerStyle | Custom container style | ViewProps['style'] | no | iOS/Android | yes | -| direction | Marquee direction | MarqueeDirections | no | iOS/Android | yes | -| duration | Marquee animation duration | number | no | iOS/Android | yes | -| label | Marquee label | string | no | iOS/Android | yes | -| labelStyle | Marquee label style | TextProps['style'] | no | iOS/Android | yes | -| numberOfReps | Marquee animation number of repetitions | number | no | iOS/Android | yes | +| containerStyle | 自定义容器样式 | ViewProps['style'] | no | iOS/Android | yes | +| direction | 滑动方向 | MarqueeDirections | no | iOS/Android | yes | +| duration | 滑动动画持续时间 | number | no | iOS/Android | yes | +| label | 滑动标签 | string | no | iOS/Android | yes | +| labelStyle | 滑动标签样式 | TextProps['style'] | no | iOS/Android | yes | +| numberOfReps | 滑动动画重复次数 | number | no | iOS/Android | yes | **ProgressiveImage**：带动画的图像组件，该组件扩展了[AnimatedImage](https://wix.github.io/react-native-ui-lib/docs/components/media/AnimatedImage)组件属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ------------------------------------------------------------ | ----------- | -------- | ----------- | ----------------- | -| thumbnailSource | Small thumbnail source to display while the full-size image is loading | ImageSource | no | iOS/Android | yes | +| thumbnailSource | 全尺寸图像加载时显示的小缩略图源 | ImageSource | no | iOS/Android | yes | **PageControl**：页面指示器组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ------------------------------------------------------------ | ---------------------------------- | -------- | ----------- | ----------------- | -| color | Color of the selected page dot and, if inactiveColor not passed, the border of the not selected pages | string | no | iOS/Android | yes | -| containerStyle | Additional styles for the top container | ViewStyle | no | iOS/Android | yes | -| currentPage | Zero-based index of the current page | number | no | iOS/Android | yes | -| enlargeActive | Whether to enlarge the active page indicator. Irrelevant when limitShownPages is in effect. | boolean | no | iOS/Android | yes | -| inactiveColor | Color of the unselected page dots and the border of the not selected pages | string | no | iOS/Android | yes | -| limitShownPages | Limit the number of page indicators shown.\enlargeActive prop is disabled in this state, when set to true there will be maximum of 7 shown.\Only relevant when numOfPages > 5. | boolean | no | iOS/Android | yes | -| numOfPages | Total number of pages | number | no | iOS/Android | yes | -| onPagePress | Action handler for clicking on a page indicator | (index: number) => void | no | iOS/Android | yes | -| size | The size of the page indicator.\When setting limitShownPages the medium sized will be 2/3 of size and the small will be 1/3 of size.\An alternative is to send an array [smallSize, mediumSize, largeSize]. | number \| [number, number, number] | no | iOS/Android | yes | -| spacing | The space between the siblings page indicators | number | no | iOS/Android | yes | -| testID | Used to identify the pageControl in tests | string | no | iOS/Android | yes | +| color | 所选页面点和（如果未传递 inactiveColor）未选页面的边框的颜色 | string | no | iOS/Android | yes | +| containerStyle | 顶部容器的额外样式 | ViewStyle | no | iOS/Android | yes | +| currentPage | 当前页面的从零开始的索引 | number | no | iOS/Android | yes | +| enlargeActive | 是否放大活动页面指示器。当 limitShownPages 生效时无关。 | boolean | no | iOS/Android | yes | +| inactiveColor | 未选页面点和未选页面的边框的颜色 | string | no | iOS/Android | yes | +| limitShownPages | 限制显示的页面指示器数量。\在此状态下 enlargeActive 属性被禁用，当设置为 true 时最多显示 7 个。\仅当 numOfPages > 5 时相关。 | boolean | no | iOS/Android | yes | +| numOfPages | 总页数 | number | no | iOS/Android | yes | +| onPagePress | 点击页面指示器的操作处理程序 | (index: number) => void | no | iOS/Android | yes | +| size | 页面指示器的大小。\当设置 limitShownPages 时，中等大小将是 size 的 2/3，小大小将是 size 的 1/3。\另一种选择是发送数组 [smallSize, mediumSize, largeSize]。 | number \| [number, number, number] | no | iOS/Android | yes | +| spacing | 兄弟页面指示器之间的间距 | number | no | iOS/Android | yes | +| testID | 用于在测试中标识页面控件 | string | no | iOS/Android | yes | **TabController**：具有延迟加载机制的选项卡控制器组件，该组件基于react-native-gesture-handler，使用react-native-navigation时，请确保使用gestureHandlerRootHOC包裹屏幕。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------------ | ------------------------------------------------------------ | -------------------------------------------------- | -------- | ----------- | ----------------- | -| asCarousel | When using TabController.PageCarousel this should be turned on | boolean | no | iOS/Android | yes | -| carouselPageWidth | Pass for custom carousel page width | number | no | iOS/Android | yes | -| initialIndex | Initial selected index | number | no | iOS/Android | yes | -| items | The list of tab bar items | TabControllerItemProps [] | no | iOS/Android | yes | -| onChangeIndex | Callback for when index has change (will not be called on ignored items) | (index: number, prevIndex: number \| null) => void | no | iOS/Android | yes | -| nestedInScrollView7.43.1+ | Pass when TabController is render inside a ScrollView (with a header) | boolean | no | iOS/Android | yes | +| asCarousel | 当使用 TabController.PageCarousel 时，应开启此选项 | boolean | no | iOS/Android | yes | +| carouselPageWidth | 为自定义轮播页面宽度传递 | number | no | iOS/Android | yes | +| initialIndex | 初始选中的索引 | number | no | iOS/Android | yes | +| items | 标签栏项目列表 | TabControllerItemProps [] | no | iOS/Android | yes | +| onChangeIndex | 当索引更改时的回调（不会在忽略的项目上调用） | (index: number, prevIndex: number \| null) => void | no | iOS/Android | yes | +| nestedInScrollView7.43.1+ | 当 TabController 渲染在 ScrollView 内部时传递（带有标题） | boolean | no | iOS/Android | yes | **TabController.PageCarousel**：TabController 的 PageCarousel 组件，该组件扩展了[ScrollView](https://reactnative.dev/docs/scrollview)组件属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------------------- | ------------------------------------------------------------ | --------- | -------- | ----------- | ----------------- | -| TabController.PageCarousel | TabController's PageCarousel component，You must pass asCarousel flag to TabController and render your TabPages inside a PageCarousel | Component | no | iOS/Android | yes | +| TabController.PageCarousel | TabController 的 PageCarousel 组件，您必须将 asCarousel 标志传递给 TabController，并在 PageCarousel 内部渲染您的 TabPages | Component | no | iOS/Android | yes | **TabController.TabBar**：TabController的TabBar组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | -------------------------------------------- | --------- | -------- | ----------- | ----------------- | -| activeBackgroundColor | Apply background color on press for tab item | string | no | iOS/Android | yes | -| backgroundColor | The TabBar background Color | string | no | iOS/Android | yes | -| centerSelected | Pass to center selected item | boolean | no | iOS/Android | yes | -| containerStyle | Additional styles for the container | ViewStyle | no | iOS/Android | yes | -| containerWidth | The TabBar container width | number | no | iOS/Android | yes | -| enableShadow | Show Tab Bar bottom shadow | boolean | no | iOS/Android | yes | -| height | Tab Bar height | number | no | iOS/Android | yes | -| iconColor | Icon tint color | string | no | iOS/Android | yes | -| indicatorInsets | The indicator insets | number | no | iOS/Android | yes | -| indicatorStyle | Custom style for the selected indicator | ViewStyle | no | iOS/Android | yes | -| labelColor | The default label color | string | no | iOS/Android | yes | -| labelStyle | Custom label style | TextStyle | no | iOS/Android | yes | -| selectedIconColor | Icon selected tint color | string | no | iOS/Android | yes | -| selectedLabelColor | The selected label color | string | no | iOS/Android | yes | -| selectedLabelStyle | Custom selected label style | TextStyle | no | iOS/Android | yes | -| shadowStyle | Custom shadow style | ViewStyle | no | iOS/Android | yes | -| spreadItems | Whether the tabBar should be spread | boolean | no | iOS/Android | yes | -| testID | The component test id | string | no | iOS/Android | yes | -| uppercase | Whether to change the text to uppercase | boolean | no | iOS/Android | yes | +| activeBackgroundColor | 为标签项按下时应用背景颜色 | string | no | iOS/Android | yes | +| backgroundColor | TabBar 背景颜色 | string | no | iOS/Android | yes | +| centerSelected | 传递以居中选中项目 | boolean | no | iOS/Android | yes | +| containerStyle | 容器的额外样式 | ViewStyle | no | iOS/Android | yes | +| containerWidth | TabBar 容器宽度 | number | no | iOS/Android | yes | +| enableShadow | 显示标签栏底部阴影 | boolean | no | iOS/Android | yes | +| height | 标签栏高度 | number | no | iOS/Android | yes | +| iconColor | 图标色调颜色 | string | no | iOS/Android | yes | +| indicatorInsets | 指示器内边距 | number | no | iOS/Android | yes | +| indicatorStyle | 选中指示器的自定义样式 | ViewStyle | no | iOS/Android | yes | +| labelColor | 默认标签颜色 | string | no | iOS/Android | yes | +| labelStyle | 自定义标签样式 | TextStyle | no | iOS/Android | yes | +| selectedIconColor | 图标选中色调颜色 | string | no | iOS/Android | yes | +| selectedLabelColor | 选中标签颜色 | string | no | iOS/Android | yes | +| selectedLabelStyle | 自定义选中标签样式 | TextStyle | no | iOS/Android | yes | +| shadowStyle | 自定义阴影样式 | ViewStyle | no | iOS/Android | yes | +| spreadItems | 标签栏是否应展开 | boolean | no | iOS/Android | yes | +| testID | 组件测试 ID | string | no | iOS/Android | yes | +| uppercase | 是否将文本更改为大写 | boolean | no | iOS/Android | yes | **TabController.TabBarItem**：TabController的TabBarItem组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ---------------------------------------------------- | ----------------------- | -------- | ----------- | ----------------- | -| activeBackgroundColor | Apply background color on press for TouchableOpacity | string | no | iOS/Android | yes | -| activeOpacity | The active opacity when pressing a tab | number | no | iOS/Android | yes | -| backgroundColor | Apply background color for the tab bar item | string | no | iOS/Android | yes | -| badge | Badge component props to display next the item label | BadgeProps | no | iOS/Android | yes | -| icon | Icon of the tab | number | no | iOS/Android | yes | -| iconColor | Icon tint color | string | no | iOS/Android | yes | -| ignore | Ignore tab presses | boolean | no | iOS/Android | yes | -| label | Label of the tab | string | no | iOS/Android | yes | -| labelColor | The default label color | string | no | iOS/Android | yes | -| labelProps | Extra label props to pass to label Text element | TextProps | no | iOS/Android | yes | -| labelStyle | Custom label style | TextStyle | no | iOS/Android | yes | -| leadingAccessory | Pass to render a leading element | ReactElement | no | iOS/Android | yes | -| onPress | Callback for when pressing a tab | (index: number) => void | no | iOS/Android | yes | -| selectedIconColor | Icon selected tint color | string | no | iOS/Android | yes | -| selectedLabelColor | The selected label color | string | no | iOS/Android | yes | -| selectedLabelStyle | Custom selected label style | TextStyle | no | iOS/Android | yes | -| style | Pass custom style | ViewStyle | no | iOS/Android | yes | -| testID | Used as a testing identifier | string | no | iOS/Android | yes | -| trailingAccessory | Pass to render a trailing element | ReactElement | no | iOS/Android | yes | -| uppercase | Whether to change the text to uppercase | boolean | no | iOS/Android | yes | -| width | A fixed width for the item | number | no | iOS/Android | yes | +| activeBackgroundColor | 为 TouchableOpacity 按下时应用背景颜色 | string | no | iOS/Android | yes | +| activeOpacity | 按下标签时的活动不透明度 | number | no | iOS/Android | yes | +| backgroundColor | 为标签栏项应用背景颜色 | string | no | iOS/Android | yes | +| badge | 在项目标签旁边显示的徽章组件属性 | BadgeProps | no | iOS/Android | yes | +| icon | 标签的图标 | number | no | iOS/Android | yes | +| iconColor | 图标色调颜色 | string | no | iOS/Android | yes | +| ignore | 忽略标签按下 | boolean | no | iOS/Android | yes | +| label | 标签的标签 | string | no | iOS/Android | yes | +| labelColor | 默认标签颜色 | string | no | iOS/Android | yes | +| labelProps | 传递给标签文本元素的额外标签属性 | TextProps | no | iOS/Android | yes | +| labelStyle | 自定义标签样式 | TextStyle | no | iOS/Android | yes | +| leadingAccessory | 传递以渲染前导元素 | ReactElement | no | iOS/Android | yes | +| onPress | 按下标签时的回调 | (index: number) => void | no | iOS/Android | yes | +| selectedIconColor | 图标选中色调颜色 | string | no | iOS/Android | yes | +| selectedLabelColor | 选中标签颜色 | string | no | iOS/Android | yes | +| selectedLabelStyle | 自定义选中标签样式 | TextStyle | no | iOS/Android | yes | +| style | 传递自定义样式 | ViewStyle | no | iOS/Android | yes | +| testID | 用作测试标识符 | string | no | iOS/Android | yes | +| trailingAccessory | 传递以渲染尾随元素 | ReactElement | no | iOS/Android | yes | +| uppercase | 是否将文本更改为大写 | boolean | no | iOS/Android | yes | +| width | 项目的固定宽度 | number | no | iOS/Android | yes | **TabController.TabPage**：TabController的TabPage 组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | ------------------------------------------------------------ | ----------------- | -------- | ----------- | ----------------- | -| index | The index of the the TabPage | number | no | iOS/Android | yes | -| lazy | Whether this page should be loaded lazily | boolean | no | iOS/Android | yes | -| lazyLoadTime | How long to wait till lazy load complete (good for showing loader screens) | number | no | iOS/Android | yes | -| renderLoading | Render a custom loading page when lazy loading | () => JSX.Element | no | iOS/Android | yes | -| testID | The component test id | string | no | iOS/Android | yes | +| index | TabPage 的索引 | number | no | iOS/Android | yes | +| lazy | 此页面是否应延迟加载 | boolean | no | iOS/Android | yes | +| lazyLoadTime | 延迟加载完成前等待的时间（适合显示加载器屏幕） | number | no | iOS/Android | yes | +| renderLoading | 延迟加载时渲染自定义加载页面 | () => JSX.Element | no | iOS/Android | yes | +| testID | 组件测试 ID | string | no | iOS/Android | yes | **Wizard**：向导组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------------- | ------------------------------------------------------------ | ----------------------- | -------- | ----------- | ----------------- | -| activeConfig | The configuration of the active step (see Wizard.Step.propTypes) | WizardStepProps | no | iOS/Android | yes | -| activeIndex | The active step's index | number | no | iOS/Android | yes | -| containerStyle | Add or override style of the container | ViewStyle | no | iOS/Android | yes | -| onActiveIndexChanged | Callback that is called when the active step is changed (i.e. a step was clicked on). The new activeIndex will be the input of the callback | (index: number) => void | no | iOS/Android | yes | -| testID | The component test id | string | no | iOS/Android | yes | +| activeConfig | 活动步骤的配置（参见 Wizard.Step.propTypes） | WizardStepProps | no | iOS/Android | yes | +| activeIndex | 活动步骤的索引 | number | no | iOS/Android | yes | +| containerStyle | 添加或覆盖容器的样式 | ViewStyle | no | iOS/Android | yes | +| onActiveIndexChanged | 当活动步骤更改时调用的回调（即单击了某个步骤）。新的 activeIndex 将是回调的输入 | (index: number) => void | no | iOS/Android | yes | +| testID | 组件测试 ID | string | no | iOS/Android | yes | **Wizard.Step**：向导组件中Step组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------ | ---------------- | -------- | ----------- | ----------------- | -| accessibilityInfo | Extra text to be read in accessibility mode | string | no | iOS/Android | yes | -| circleBackgroundColor | Circle's background color | string | no | iOS/Android | yes | -| circleColor | Color of the circle | string | no | iOS/Android | yes | -| circleSize | The step's circle size (diameter) | number | no | iOS/Android | yes | -| color | Color of the step index (or of the icon, when provided) | string | no | iOS/Android | yes | -| connectorStyle | Additional styles for the connector | ViewStyle | no | iOS/Android | yes | -| enabled | Whether the step should be enabled | boolean | no | iOS/Android | yes | -| icon | Icon to replace the (default) index | ImageProps | no | iOS/Android | yes | -| indexLabelStyle | Additional styles for the index's label (when icon is not provided) | TextStyle | no | iOS/Android | yes | -| label | The label of the item | string | no | iOS/Android | yes | -| labelStyle | Additional styles for the label | TextStyle | no | iOS/Android | yes | -| state | The state of the step (Wizard.States.X) | WizardStepStates | no | iOS/Android | yes | +| accessibilityInfo | 在无障碍模式下读取的额外文本 | string | no | iOS/Android | yes | +| circleBackgroundColor | 圆圈的背景颜色 | string | no | iOS/Android | yes | +| circleColor | 圆圈的颜色 | string | no | iOS/Android | yes | +| circleSize | 步骤的圆圈大小（直径） | number | no | iOS/Android | yes | +| color | 步骤索引的颜色（或提供图标时的图标颜色） | string | no | iOS/Android | yes | +| connectorStyle | 连接器的额外样式 | ViewStyle | no | iOS/Android | yes | +| enabled | 步骤是否应启用 | boolean | no | iOS/Android | yes | +| icon | 替换（默认）索引的图标 | ImageProps | no | iOS/Android | yes | +| indexLabelStyle | 索引标签的额外样式（当未提供图标时） | TextStyle | no | iOS/Android | yes | +| label | 项目的标签 | string | no | iOS/Android | yes | +| labelStyle | 标签的额外样式 | TextStyle | no | iOS/Android | yes | +| state | 步骤的状态（Wizard.States.X） | WizardStepStates | no | iOS/Android | yes | **ActionSheet**：弹窗选择组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| cancelButtonIndex | Index of the option represents the cancel action (to be displayed as the separated bottom bold button) | number | no | iOS/Android | yes | -| containerStyle | Add or override style of the action sheet (wraps the title and actions) | ViewStyle | no | iOS/Android | yes | -| destructiveButtonIndex | Index of the option represents the destructive action (will display red text. Usually used for delete or abort actions) | number | no | iOS/Android | yes | -| dialogStyle | Add or override style of the dialog wrapping the action sheet | ViewStyle | no | iOS/Android | yes | -| message | Message of the action sheet | string | no | iOS/Android | yes | -| onDismiss | Called when dismissing the action sheet (usually used for setting 'visible' prop to false) | DialogProps['onDismiss'] | no | iOS/Android | yes | -| onModalDismissed | iOS only, modal only. Called once the modal has been dismissed | DialogProps ['onDialogDismissed'] | no | iOS | no | -| options | List of options for the action sheet, follows the Button prop types (supply 'label' string and 'onPress' function) | Array | no | iOS/Android | yes | -| optionsStyle | Add or override style of the options list | ViewStyle | no | iOS/Android | yes | -| renderAction | You will need to call 'onOptionPress' so the option's 'onPress' will be called. Render custom action | ( option: ButtonProps, index: number, onOptionPress: ActionSheetOnOptionPress ) => JSX.Element | no | iOS/Android | yes | -| renderTitle | Render custom title | () => JSX.Element | no | iOS/Android | yes | -| showCancelButton | When passed (only with useNativeIOS), will display a cancel button at the bottom (overrides cancelButtonIndex) | boolean | no | iOS/Android | yes | -| testID | The test id for e2e tests | string | no | iOS/Android | yes | -| title | If both 'title' and 'message' are not passed will not render the title view at all. Title of the action sheet | string | no | iOS/Android | yes | -| useNativeIOS | Should use the native action sheet for iOS | boolean | no | iOS/Android | yes | -| useSafeArea | In iOS, use safe area, in case component attached to the bottom | boolean | no | iOS/Android | yes | -| visible | Whether to show the action sheet or not | boolean | no | iOS/Android | yes | +| cancelButtonIndex | 表示取消操作的选项的索引（将显示为分离的底部粗体按钮） | number | no | iOS/Android | yes | +| containerStyle | 添加或覆盖操作表的样式（包装标题和操作） | ViewStyle | no | iOS/Android | yes | +| destructiveButtonIndex | 表示破坏性操作的选项的索引（将显示红色文本。通常用于删除或中止操作） | number | no | iOS/Android | yes | +| dialogStyle | 添加或覆盖包装操作表的对话框样式 | ViewStyle | no | iOS/Android | yes | +| message | 操作表的消息 | string | no | iOS/Android | yes | +| onDismiss | 关闭操作表时调用（通常用于将 'visible' 属性设置为 false） | DialogProps['onDismiss'] | no | iOS/Android | yes | +| onModalDismissed | 仅限 iOS，仅模态。模态关闭后调用一次 | DialogProps ['onDialogDismissed'] | no | iOS | no | +| options | 操作表的选项列表，遵循 Button 属性类型（提供 'label' 字符串和 'onPress' 函数） | Array | no | iOS/Android | yes | +| optionsStyle | 添加或覆盖选项列表的样式 | ViewStyle | no | iOS/Android | yes | +| renderAction | 您需要调用 'onOptionPress' 以便选项的 'onPress' 被调用。渲染自定义操作 | ( option: ButtonProps, index: number, onOptionPress: ActionSheetOnOptionPress ) => JSX.Element | no | iOS/Android | yes | +| renderTitle | 渲染自定义标题 | () => JSX.Element | no | iOS/Android | yes | +| showCancelButton | 当传递时（仅与 useNativeIOS 一起使用），将在底部显示取消按钮（覆盖 cancelButtonIndex） | boolean | no | iOS/Android | yes | +| testID | 用于端到端测试的测试 ID | string | no | iOS/Android | yes | +| title | 如果未传递 'title' 和 'message'，则根本不会渲染标题视图。操作表的标题 | string | no | iOS/Android | yes | +| useNativeIOS | 是否应为 iOS 使用原生操作表 | boolean | no | iOS/Android | yes | +| useSafeArea | 在 iOS 中，使用安全区域，以防组件附加到底部 | boolean | no | iOS/Android | yes | +| visible | 是否显示操作表 | boolean | no | iOS/Android | yes | **Dialog**：弹窗组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------- | ------------------------------------------------------------ | --------------------------- | -------- | ----------- | ----------------- | -| containerStyle | Component's container style | ViewStyle | no | iOS/Android | yes | -| height | Height | string \|number | no | iOS/Android | yes | -| ignoreBackgroundPress | Whether or not to ignore background press | boolean | no | iOS/Android | yes | -| onDialogDismissed | Called once the dialog has been dismissed completely | (props: any) => void | no | iOS/Android | yes | -| onDismiss | Called when clicking on the background | (props?: any) => void | no | iOS/Android | yes | -| overlayBackgroundColor | The color of the overlay background | string | no | iOS/Android | yes | -| panDirection | The direction of the allowed pan | UP \|DOWN \|LEFT \|RIGHT | no | iOS/Android | yes | -| pannableHeaderProps | The props that will be passed to the pannable header | any | no | iOS/Android | yes | -| renderPannableHeader | If this is added only the header will be pannable. Props are transferred to the 'renderPannableHeader'. For scrollable content (the children of the dialog) | (props: any) => JSX.Element | no | iOS/Android | yes | -| testID | The test id for e2e tests | string | no | iOS/Android | yes | -| useSafeArea | In iOS, use safe area, in case component attached to the bottom | boolean | no | iOS/Android | yes | -| visible | Control visibility of the component | boolean | no | iOS/Android | yes | -| width | Width | string \| number | no | iOS/Android | yes | +| containerStyle | 组件的容器样式 | ViewStyle | no | iOS/Android | yes | +| height | 高度 | string \|number | no | iOS/Android | yes | +| ignoreBackgroundPress | 是否忽略背景按下 | boolean | no | iOS/Android | yes | +| onDialogDismissed | 对话框完全关闭后调用 | (props: any) => void | no | iOS/Android | yes | +| onDismiss | 点击背景时调用 | (props?: any) => void | no | iOS/Android | yes | +| overlayBackgroundColor | 覆盖背景的颜色 | string | no | iOS/Android | yes | +| panDirection | 允许平移的方向 | UP \|DOWN \|LEFT \|RIGHT | no | iOS/Android | yes | +| pannableHeaderProps | 将传递给可平移标题的属性 | any | no | iOS/Android | yes | +| renderPannableHeader | 如果添加此项，则只有标题是可平移的。属性将传递给 'renderPannableHeader'。对于可滚动内容（对话框的子项） | (props: any) => JSX.Element | no | iOS/Android | yes | +| testID | 用于端到端测试的测试 ID | string | no | iOS/Android | yes | +| useSafeArea | 在 iOS 中，使用安全区域，以防组件附加到底部 | boolean | no | iOS/Android | yes | +| visible | 控制组件的可见性 | boolean | no | iOS/Android | yes | +| width | 宽度 | string \| number | no | iOS/Android | yes | **FeatureHighlight**：功能发现组件，FeatureHighlight 组件必须是 render() 返回的根视图的直接子级，如果要突出显示的元素没有样式属性，请添加 'style={{opacity: 1}}' 以便 Android 操作系统可以检测到它，FeatureHighlight 使用native库，你需要引入它。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- | ----------- | ----------------- | -| borderColor | Color of the border around the highlighted element | string | no | iOS/Android | yes | -| borderRadius | Border radius for the border corners around the highlighted element | number | no | iOS/Android | yes | -| borderWidth | Width of the border around the highlighted element | number | no | iOS/Android | yes | -| confirmButtonProps | Props that will be passed to the dismiss button | ButtonProps | no | iOS/Android | yes | -| getTarget | Callback that extract the ref of the element to be highlighted | () => any | no | iOS/Android | yes | -| highlightFrame | Frame of the area to highlight {x, y, width, height} | HighlightFrame | no | iOS/Android | yes | -| innerPadding | The padding of the highlight frame around the highlighted element's frame (only when passing ref in 'getTarget') | number | no | iOS/Android | yes | -| message | Message to be displayed | string | no | iOS/Android | yes | -| messageNumberOfLines | Message's max number of lines | number | no | iOS/Android | yes | -| messageStyle | Message text style | TextStyle | no | iOS/Android | yes | -| minimumRectSize | Android API 21+, and only when passing a ref in 'getTarget'. The minimum size of the highlighted component | RectSize | no | iOS/Android | yes | -| onBackgroundPress | Called the background pressed | TouchableWithoutFeedbackProps ['onPress'] | no | iOS/Android | yes | -| overlayColor | Color of the content's background (usually includes alpha for transparency) | string | no | iOS/Android | yes | -| pageControlProps | PageControl component's props | PageControlProps | no | iOS/Android | yes | -| testID | The test id for e2e tests | string | no | iOS/Android | yes | -| textColor | Color of the content's text | string | no | iOS/Android | yes | -| title | Title of the content to be displayed | string | no | iOS/Android | yes | -| titleNumberOfLines | Title's max number of lines | number | no | iOS/Android | yes | -| titleStyle | Title text style | TextStyle | no | iOS/Android | yes | -| visible | Determines if to present the feature highlight component | boolean | no | iOS/Android | yes | +| borderColor | 高亮元素周围边框的颜色 | string | no | iOS/Android | yes | +| borderRadius | 高亮元素周围边框角的边框半径 | number | no | iOS/Android | yes | +| borderWidth | 高亮元素周围边框的宽度 | number | no | iOS/Android | yes | +| confirmButtonProps | 将传递给关闭按钮的属性 | ButtonProps | no | iOS/Android | yes | +| getTarget | 提取要高亮元素的引用的回调 | () => any | no | iOS/Android | yes | +| highlightFrame | 要高亮区域的框架 {x, y, width, height} | HighlightFrame | no | iOS/Android | yes | +| innerPadding | 高亮框架围绕高亮元素框架的内边距（仅在 'getTarget' 中传递引用时） | number | no | iOS/Android | yes | +| message | 要显示的消息 | string | no | iOS/Android | yes | +| messageNumberOfLines | 消息的最大行数 | number | no | iOS/Android | yes | +| messageStyle | 消息文本样式 | TextStyle | no | iOS/Android | yes | +| minimumRectSize | Android API 21+，并且仅在 'getTarget' 中传递引用时。高亮组件的最小大小 | RectSize | no | iOS/Android | yes | +| onBackgroundPress | 背景按下时调用 | TouchableWithoutFeedbackProps ['onPress'] | no | iOS/Android | yes | +| overlayColor | 内容背景的颜色（通常包括 alpha 透明度） | string | no | iOS/Android | yes | +| pageControlProps | PageControl 组件的属性 | PageControlProps | no | iOS/Android | yes | +| testID | 用于端到端测试的测试 ID | string | no | iOS/Android | yes | +| textColor | 内容文本的颜色 | string | no | iOS/Android | yes | +| title | 要显示的内容标题 | string | no | iOS/Android | yes | +| titleNumberOfLines | 标题的最大行数 | number | no | iOS/Android | yes | +| titleStyle | 标题文本样式 | TextStyle | no | iOS/Android | yes | +| visible | 确定是否呈现功能高亮组件 | boolean | no | iOS/Android | yes | **FloatingButton**：具有渐变的悬浮按钮。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------ | --------------------- | -------- | ----------- | ----------------- | -| bottomMargin | The bottom margin of the button, or secondary button if passed | number | no | iOS/Android | yes | -| button | Props for the Button component | ButtonProps | no | iOS/Android | yes | -| buttonLayout | Button layout direction: vertical or horizontal | FloatingButtonLayouts | no | iOS/Android | yes | -| duration | The duration of the button's animations (show/hide) | number | no | iOS/Android | yes | -| fullWidth | Relevant to vertical layout only. Whether the buttons get the container's full with | boolean | no | iOS/Android | yes | -| hideBackgroundOverlay | Whether to show background overlay | boolean | no | iOS/Android | yes | -| secondaryButton | Props for the secondary Button component | ButtonProps | no | iOS/Android | yes | -| testID | Use `testID.button` for the main button or `testID.secondaryButton` for the secondary. The test id for e2e tests | string | no | iOS/Android | yes | -| visible | Whether the component is visible | boolean | no | iOS/Android | yes | -| withoutAnimation | Whether to show/hide the button without animation | boolean | no | iOS/Android | yes | +| bottomMargin | 按钮的底部边距，如果传递了辅助按钮则为辅助按钮的底部边距 | number | no | iOS/Android | yes | +| button | Button 组件的属性 | ButtonProps | no | iOS/Android | yes | +| buttonLayout | 按钮布局方向：垂直或水平 | FloatingButtonLayouts | no | iOS/Android | yes | +| duration | 按钮动画的持续时间（显示/隐藏） | number | no | iOS/Android | yes | +| fullWidth | 仅与垂直布局相关。按钮是否获取容器的全宽 | boolean | no | iOS/Android | yes | +| hideBackgroundOverlay | 是否显示背景覆盖 | boolean | no | iOS/Android | yes | +| secondaryButton | 辅助 Button 组件的属性 | ButtonProps | no | iOS/Android | yes | +| testID | 为主按钮使用 `testID.button` 或为辅助按钮使用 `testID.secondaryButton`。用于端到端测试的测试 ID | string | no | iOS/Android | yes | +| visible | 组件是否可见 | boolean | no | iOS/Android | yes | +| withoutAnimation | 是否在没有动画的情况下显示/隐藏按钮 | boolean | no | iOS/Android | yes | **Modal**：模态框组件，该组件扩展了[Modal](https://reactnative.dev/docs/modal)组件属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------- | ------------------------------------------------------------ | -------------------------------------- | -------- | ----------- | ----------------- | -| accessibilityLabel | Overrides the text that's read by the screen reader when the user interacts with the element.\By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space. | string | no | iOS/Android | yes | -| blurView | A custom view to use as a BlurView instead of the default one | JSX.Element | no | iOS/Android | yes | -| enableModalBlur | iOS only. Blurs the modal background when transparent | boolean | no | iOS | no | -| onBackgroundPress | allow dismissing a modal when clicking on its background | (event: GestureResponderEvent) => void | no | iOS/Android | yes | -| overlayBackgroundColor | The background color of the overlay | string | no | iOS/Android | yes | -| testID | The modal's end-to-end test identifier | string | no | iOS/Android | yes | -| useGestureHandlerRootView | Android only. Should add a GestureHandlerRootView | boolean | no | Android | no | +| accessibilityLabel | 覆盖屏幕阅读器在用户与元素交互时读取的文本。\默认情况下，标签是通过遍历所有子项并累积所有由空格分隔的文本节点来构建的。 | string | no | iOS/Android | yes | +| blurView | 用作 BlurView 的自定义视图而不是默认视图 | JSX.Element | no | iOS/Android | yes | +| enableModalBlur | 仅限 iOS。透明时模糊模态背景 | boolean | no | iOS | no | +| onBackgroundPress | 允许在单击其背景时关闭模态 | (event: GestureResponderEvent) => void | no | iOS/Android | yes | +| overlayBackgroundColor | 覆盖的背景颜色 | string | no | iOS/Android | yes | +| testID | 模态的端到端测试标识符 | string | no | iOS/Android | yes | +| useGestureHandlerRootView | 仅限 Android。应添加 GestureHandlerRootView | boolean | no | Android | no | **Modal.TopBar**：模态框的TopBar组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------- | ---------------------------------------------------------- | -------------------------------------- | -------- | ----------- | ----------------- | -| cancelButtonProps | Cancel action props | ButtonProps | no | iOS/Android | yes | -| cancelIcon | Cancel action icon | ImageSource | no | iOS/Android | yes | -| cancelLabel | Cancel action label | string | no | iOS/Android | yes | -| containerStyle | Style for the TopBar container | ViewStyle | no | iOS/Android | yes | -| doneButtonProps | Done action props | ButtonProps | no | iOS/Android | yes | -| doneIcon | Done action icon | ImageSource | no | iOS/Android | yes | -| doneLabel | Done action label | string | no | iOS/Android | yes | -| includeStatusBar | Whether to include status bar or not (height calculations) | boolean | no | iOS/Android | yes | -| leftButtons | Buttons to render on the left side of the top bar | topBarButtonProp\| topBarButtonProp[] | no | iOS/Android | yes | -| onCancel | Cancel action callback | (props?: any) => void | no | iOS/Android | yes | -| onDone | Done action callback | (props?: any) => void | no | iOS/Android | yes | -| rightButtons | Buttons to render on the right side of the top bar | topBarButtonProp \| topBarButtonProp[] | no | iOS/Android | yes | -| subtitle | Subtitle to display below the top bar title | string | no | iOS/Android | yes | -| subtitleStyle | Subtitle custom style | TextStyle | no | iOS/Android | yes | -| title | Title to display in the center of the top bar | string | no | iOS/Android | yes | -| titleStyle | Title custom style | TextStyle | no | iOS/Android | yes | +| cancelButtonProps | 取消操作属性 | ButtonProps | no | iOS/Android | yes | +| cancelIcon | 取消操作图标 | ImageSource | no | iOS/Android | yes | +| cancelLabel | 取消操作标签 | string | no | iOS/Android | yes | +| containerStyle | TopBar 容器的样式 | ViewStyle | no | iOS/Android | yes | +| doneButtonProps | 完成操作属性 | ButtonProps | no | iOS/Android | yes | +| doneIcon | 完成操作图标 | ImageSource | no | iOS/Android | yes | +| doneLabel | 完成操作标签 | string | no | iOS/Android | yes | +| includeStatusBar | 是否包括状态栏（高度计算） | boolean | no | iOS/Android | yes | +| leftButtons | 在顶部栏左侧渲染的按钮 | topBarButtonProp\| topBarButtonProp[] | no | iOS/Android | yes | +| onCancel | 取消操作回调 | (props?: any) => void | no | iOS/Android | yes | +| onDone | 完成操作回调 | (props?: any) => void | no | iOS/Android | yes | +| rightButtons | 在顶部栏右侧渲染的按钮 | topBarButtonProp \| topBarButtonProp[] | no | iOS/Android | yes | +| subtitle | 在顶部栏标题下方显示的副标题 | string | no | iOS/Android | yes | +| subtitleStyle | 副标题自定义样式 | TextStyle | no | iOS/Android | yes | +| title | 在顶部栏中心显示的标题 | string | no | iOS/Android | yes | +| titleStyle | 标题自定义样式 | TextStyle | no | iOS/Android | yes | **Toast**：非中断式弹窗组件， 请考虑转向我们新的 Toast 实现并使用 Incubator.Toast 代替。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----- | ------------------------------ | --------- | -------- | ----------- | ----------------- | -| Toast | A customizable Toast component | Component | no | iOS/Android | yes | +| Toast | 可自定义的 Toast 组件 | Component | no | iOS/Android | yes | **Badge**：圆形彩色徽章组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | ------------------------------------------------------------ | -------------------------- | -------- | ----------- | ----------------- | -| backgroundColor | Background color | string | no | iOS/Android | yes | -| borderColor | Color of border around the badge | ImageStyle ['borderColor'] | no | iOS/Android | yes | -| borderRadius | Radius of border around the badge | number | no | iOS/Android | yes | -| borderWidth | Width of border around the badge | number | no | iOS/Android | yes | -| containerStyle | Additional styles for the top container | ViewStyle | no | iOS/Android | yes | -| customElement | Custom element to render instead of an icon | JSX.Element | no | iOS/Android | yes | -| hitSlop | Defines how far a touch event can start away from the badge | ViewProps['hitSlop'] | no | iOS/Android | yes | -| icon | Renders an icon badge | ImageSourcePropType | no | iOS/Android | yes | -| iconProps | Additional props passed to icon | ImageProps | no | iOS/Android | yes | -| iconStyle | Additional styling to badge icon | ImageStyle | no | iOS/Android | yes | -| label | Passing a label (undefined) will present a pimple badge. Text to show inside the badge | string | no | iOS/Android | yes | -| labelFormatterLimit | Beyond the max number for that digit length, a '+' will show at the end. If set to a value not included in LABEL_FORMATTER_VALUES, no formatting will occur. Example: labelLengthFormatter={2}, label={124}, label will present '99+' Receives a number from 1 to 4, representing the label's max digit length | LabelFormatterValues | no | iOS/Android | yes | -| labelStyle | Additional styles for the badge label | TextStyle | no | iOS/Android | yes | -| onPress | Called when the badge is pressed | (props: any) => void | no | iOS/Android | yes | -| size | Badge's size | number | no | iOS/Android | yes | +| backgroundColor | 背景颜色 | string | no | iOS/Android | yes | +| borderColor | 徽章周围边框的颜色 | ImageStyle ['borderColor'] | no | iOS/Android | yes | +| borderRadius | 徽章周围边框的半径 | number | no | iOS/Android | yes | +| borderWidth | 徽章周围边框的宽度 | number | no | iOS/Android | yes | +| containerStyle | 顶部容器的额外样式 | ViewStyle | no | iOS/Android | yes | +| customElement | 渲染而不是图标的自定义元素 | JSX.Element | no | iOS/Android | yes | +| hitSlop | 定义触摸事件可以从徽章开始多远 | ViewProps['hitSlop'] | no | iOS/Android | yes | +| icon | 渲染图标徽章 | ImageSourcePropType | no | iOS/Android | yes | +| iconProps | 传递给图标的额外属性 | ImageProps | no | iOS/Android | yes | +| iconStyle | 徽章图标的额外样式 | ImageStyle | no | iOS/Android | yes | +| label | 传递标签（undefined）将呈现斑点徽章。徽章内显示的文本 | string | no | iOS/Android | yes | +| labelFormatterLimit | 超过该数字长度的最大数字，将在末尾显示 '+'。如果设置为不包含在 LABEL_FORMATTER_VALUES 中的值，则不会进行格式化。示例：labelLengthFormatter={2}, label={124}, 标签将显示 '99+' 接收从 1 到 4 的数字，代表标签的最大数字长度 | LabelFormatterValues | no | iOS/Android | yes | +| labelStyle | 徽章标签的额外样式 | TextStyle | no | iOS/Android | yes | +| onPress | 当徽章被按下时调用 | (props: any) => void | no | iOS/Android | yes | +| size | 徽章的大小 | number | no | iOS/Android | yes | **ConnectionStatusBar**：顶部栏显示无网络连接状态，该组件依赖[@react-native-community/netinfo](/zh-cn/react-native-community-netinfo.md) 库。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | --------------------------------------------------- | -------------------------------------------------- | -------- | ----------- | ----------------- | -| allowDismiss | Whethere to allow the user to dismiss | boolean | no | iOS/Android | yes | -| label | Text to show as the status | string | no | iOS/Android | yes | -| onConnectionChange | Handler to get connection change events propagation | (isConnected: boolean, isInitial: boolean) => void | no | iOS/Android | yes | -| useAbsolutePosition | Use absolute position for the component | boolean | no | iOS/Android | yes | +| allowDismiss | 是否允许用户关闭 | boolean | no | iOS/Android | yes | +| label | 显示为状态的文本 | string | no | iOS/Android | yes | +| onConnectionChange | 处理连接更改事件传播的处理程序 | (isConnected: boolean, isInitial: boolean) => void | no | iOS/Android | yes | +| useAbsolutePosition | 为组件使用绝对位置 | boolean | no | iOS/Android | yes | **ProgressBar**：进度条组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | -------------------------------------------------------- | ----------- | -------- | ----------- | ----------------- | -| customElement | Custom element to render on top of the animated progress | JSX.Element | no | iOS/Android | yes | -| fullWidth | FullWidth Ui preset | boolean | no | iOS/Android | yes | -| progress | The progress of the bar from 0 to 100 | number | no | iOS/Android | yes | -| progressColor | Progress color | string | no | iOS/Android | yes | -| style | Override container style | ViewStyle | no | iOS/Android | yes | +| customElement | 在动画进度顶部渲染的自定义元素 | JSX.Element | no | iOS/Android | yes | +| fullWidth | 全宽 UI 预设 | boolean | no | iOS/Android | yes | +| progress | 从 0 到 100 的进度条进度 | number | no | iOS/Android | yes | +| progressColor | 进度颜色 | string | no | iOS/Android | yes | +| style | 覆盖容器样式 | ViewStyle | no | iOS/Android | yes | **SkeletonView**：骨架视图组件，用于内容还未加载临时显示骨架，该组件需要安装[react-native-shimmer-placeholder](/zh-cn/react-native-shimmer-placeholder.md)和[react-native-linear-gradient](/zh-cn/react-native-linear-gradient.md)库。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | ------------------------------------------------------------ | -------------------------------------- | -------- | ----------- | ----------------- | -| borderRadius | The border radius of the skeleton view | number | no | iOS/Android | yes | -| circle | Whether the skeleton is a circle (will override the borderRadius) | boolean | no | iOS/Android | yes | -| colors | The colors of the skeleton view, the array length has to be >=2 | string[] | no | iOS/Android | yes | -| customValue | Custom value of any type to pass on to SkeletonView and receive back in the renderContent callback. | any | no | iOS/Android | yes | -| height | The height of the skeleton view | number | no | iOS/Android | yes | -| listProps | Props that are available when using template={SkeletonView.templates.LIST_ITEM} | SkeletonListProps | no | iOS/Android | yes | -| renderContent | A function that will render the content once the content is ready (i.e. showContent is true). The method will be called with the Skeleton's customValue (i.e. renderContent(props?.customValue)) | (customValue?: any) => React.ReactNode | no | iOS/Android | yes | -| shimmerStyle | Additional style to the skeleton view | ViewStyle | no | iOS/Android | yes | -| showContent | The content has been loaded, start fading out the skeleton and fading in the content | boolean | no | iOS/Android | yes | -| style | Override container styles | ViewStyle | no | iOS/Android | yes | -| template | Accessible through SkeletonView.templates.xxx. The type of the skeleton view. | listItem \|content | no | iOS/Android | yes | -| testID | The component test id | string | no | iOS/Android | yes | -| times | Generates duplicate skeletons | number | no | iOS/Android | yes | -| timesKey | A key prefix for the duplicated SkeletonViews | string | no | iOS/Android | yes | -| width | The width of the skeleton view | number | no | iOS/Android | yes | +| borderRadius | 骨架视图的边框半径 | number | no | iOS/Android | yes | +| circle | 骨架是否为圆形（将覆盖 borderRadius） | boolean | no | iOS/Android | yes | +| colors | 骨架视图的颜色，数组长度必须 >=2 | string[] | no | iOS/Android | yes | +| customValue | 传递给 SkeletonView 并在 renderContent 回调中接收的任何类型的自定义值。 | any | no | iOS/Android | yes | +| height | 骨架视图的高度 | number | no | iOS/Android | yes | +| listProps | 使用 template={SkeletonView.templates.LIST_ITEM} 时可用的属性 | SkeletonListProps | no | iOS/Android | yes | +| renderContent | 一旦内容准备好（即 showContent 为 true）将渲染内容的函数。该方法将使用 Skeleton 的 customValue 调用（即 renderContent(props?.customValue)） | (customValue?: any) => React.ReactNode | no | iOS/Android | yes | +| shimmerStyle | 骨架视图的额外样式 | ViewStyle | no | iOS/Android | yes | +| showContent | 内容已加载，开始淡出骨架并淡入内容 | boolean | no | iOS/Android | yes | +| style | 覆盖容器样式 | ViewStyle | no | iOS/Android | yes | +| template | 可通过 SkeletonView.templates.xxx 访问。骨架视图的类型。 | listItem \|content | no | iOS/Android | yes | +| testID | 组件测试 ID | string | no | iOS/Android | yes | +| times | 生成重复骨架 | number | no | iOS/Android | yes | +| timesKey | 重复 SkeletonViews 的键前缀 | string | no | iOS/Android | yes | +| width | 骨架视图的宽度 | number | no | iOS/Android | yes | **searchInput**：7.43.1+用于过滤目的的搜索输入组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------ | ------------------------------------------------------------ | ------------------ | -------- | ----------- | ----------------- | -| onDismiss | callback for dismiss action | () => void | no | iOS/Android | yes | -| onClear | On clear button callback | () => void | no | iOS/Android | yes | -| showLoader | Whether to show a loader instead of the left search icon. | boolean | no | iOS/Android | yes | -| customLoader | Custom loader element to render instead of the default loader | React.ReactElement | no | iOS/Android | yes | -| customRightElement | Custom right element | React.ReactElement | no | iOS/Android | yes | -| cancelButtonProps | Props for the cancel button | ButtonProps | no | iOS/Android | yes | -| inaccessible | Turn off accessibility for this view and its nested children | boolean | no | iOS/Android | yes | -| useSafeArea | In case the SearchInput is rendered in a safe area (top of the screen) | boolean | no | iOS/Android | yes | -| containerStyle | Override styles for the input | ViewStyle | no | iOS/Android | yes | -| style | Override styles for container | ViewStyle | no | iOS/Android | yes | +| onDismiss | 关闭操作的回调 | () => void | no | iOS/Android | yes | +| onClear | 清除按钮回调 | () => void | no | iOS/Android | yes | +| showLoader | 是否显示加载器而不是左侧搜索图标。 | boolean | no | iOS/Android | yes | +| customLoader | 渲染而不是默认加载器的自定义加载器元素 | React.ReactElement | no | iOS/Android | yes | +| customRightElement | 自定义右侧元素 | React.ReactElement | no | iOS/Android | yes | +| cancelButtonProps | 取消按钮的属性 | ButtonProps | no | iOS/Android | yes | +| inaccessible | 关闭此视图及其嵌套子视图的无障碍功能 | boolean | no | iOS/Android | yes | +| useSafeArea | 如果 SearchInput 渲染在安全区域中（屏幕顶部） | boolean | no | iOS/Android | yes | +| containerStyle | 覆盖输入的样式 | ViewStyle | no | iOS/Android | yes | +| style | 覆盖容器的样式 | ViewStyle | no | iOS/Android | yes | **PieChart**：7.43.1+圆形统计图组件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------ | --------------------------------------------- | ---------------------- | -------- | ----------- | ----------------- | -| segments | Pie chart segments array | PieChartSegmentProps[] | no | iOS/Android | yes | -| diameter | Pie chart diameter | number | no | iOS/Android | yes | -| dividerWidth | The width of the divider between the segments | number | no | iOS/Android | yes | -| dividerColor | The color of the divider between the segments | ColorValue | no | iOS/Android | yes | +| segments | 饼图段数组 | PieChartSegmentProps[] | no | iOS/Android | yes | +| diameter | 饼图直径 | number | no | iOS/Android | yes | +| dividerWidth | 段之间分隔线的宽度 | number | no | iOS/Android | yes | +| dividerColor | 段之间分隔线的颜色 | ColorValue | no | iOS/Android | yes | ## API @@ -1699,29 +1695,29 @@ ohpm install | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------ | ------------------------------------------------------------ | ------------------------------------------------ | -------- | ----------- | ----------------- | -| loadColors | Load a set of colors to be used in the app. | ({[key: string]: string}) => void | no | iOS/Android | yes | -| loadSchemes | Load a set of scheme colors to support dark/light mode. | ({[name: string]: {[key: string]: any}}) => void | no | iOS/Android | yes | -| rgba | Return rgba string with color and transparency | (color: string, num: number) => string | no | iOS/Android | yes | -| getColorTint | Get color tint | (color: string, num: number) => string | no | iOS/Android | yes | -| isDark | returns `true` if a color is considered dark (bright colors will return `false`) | (color: string) => boolean | no | iOS/Android | yes | +| loadColors | 加载一组要在应用程序中使用的颜色。 | ({[key: string]: string}) => void | no | iOS/Android | yes | +| loadSchemes | 加载一组方案颜色以支持深色/浅色模式。 | ({[name: string]: {[key: string]: any}}) => void | no | iOS/Android | yes | +| rgba | 返回带有颜色和透明度的 rgba 字符串 | (color: string, num: number) => string | no | iOS/Android | yes | +| getColorTint | 获取颜色色调 | (color: string, num: number) => string | no | iOS/Android | yes | +| isDark | 如果颜色被认为是深色则返回 `true`（亮色将返回 `false`） | (color: string) => boolean | no | iOS/Android | yes | **ThemeManager**: 使用 ThemeManager 为您的应用程序设置默认的全局行为。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| setComponentTheme | Set default props for a component by passing an object or a callback | (componentName, defaultPropsObject) => void \| (componentName, componentProps => newDefaultPropsObject) => void | no | iOS/Android | yes | +| setComponentTheme | 通过传递对象或回调为组件设置默认属性 | (componentName, defaultPropsObject) => void \| (componentName, componentProps => newDefaultPropsObject) => void | no | iOS/Android | yes | -**Typography**: 设置样式属性，可直接通过“属性”的方式给组件设置样式。 +**Typography**: 设置样式属性，可直接通过"属性"的方式给组件设置样式。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ----------------------------- | ------------------------------------------------ | -------- | ----------- | ----------------- | -| loadTypographies | Set style attribute variables | ({[name: string]: {[key: string]: any}}) => void | no | iOS/Android | yes | +| loadTypographies | 设置样式属性变量 | ({[name: string]: {[key: string]: any}}) => void | no | iOS/Android | yes | -**Spacings**: 设置空间大小变量，可通过 “属性-变量名” 的方式设置样式。 +**Spacings**: 设置空间大小变量，可通过 "属性-变量名" 的方式设置样式。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ----------------------- | ----------------------------------- | -------- | ----------- | ----------------- | -| loadTypographies | Set space size variable | ({ [key: string]: number }) => void | no | iOS/Android | yes | +| loadTypographies | 设置空间大小变量 | ({ [key: string]: number }) => void | no | iOS/Android | yes | ## 遗留问题 -- Gitee From 17435c394bed81db3456faa4dcae3dda403f7569 Mon Sep 17 00:00:00 2001 From: songzhf Date: Tue, 25 Nov 2025 12:30:40 +0800 Subject: [PATCH 2/9] =?UTF-8?q?docs:=20[Issues:=20#ID8HC4]=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: songzhf --- en/react-native-create-thumbnail.md | 16 ++++++++-------- en/react-native-marquee.md | 9 +++++---- en/react-native-performance.md | 9 --------- en/react-native-signature-canvas.md | 5 ----- zh-cn/react-countdown-circle-timer.md | 2 +- zh-cn/react-native-signature-canvas.md | 5 ----- 6 files changed, 14 insertions(+), 32 deletions(-) diff --git a/en/react-native-create-thumbnail.md b/en/react-native-create-thumbnail.md index 11751cdb..88f73460 100644 --- a/en/react-native-create-thumbnail.md +++ b/en/react-native-create-thumbnail.md @@ -26,26 +26,26 @@ Please refer to the Releases page of the third-party library for the correspondi | 2.0.1 | [@react-native-ohos/react-native-create-thumbnail Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-create-thumbnail/releases) | 0.72 | | 2.1.0 | [@react-native-ohos/react-native-create-thumbnail Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-create-thumbnail/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. - -Go to the project directory and execute the following instruction: - -| Version | Post Information | Supports RN version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 2.0.0 | [@react-native-oh-tpl/react-native-create-thumbnail Releases](https://github.com/react-native-oh-library/react-native-create-thumbnail/releases) | 0.72 | -| 2.1.0 | [@react-native-ohos/react-native-create-thumbnail Releases]() | 0.77 | #### **npm** ```bash +# V2.0.0 +npm install @react-native-oh-tpl/react-native-create-thumbnail + +# V2.1.0 npm install @react-native-ohos/react-native-create-thumbnail ``` #### **yarn** ```bash +# V2.0.0 +yarn add @react-native-oh-tpl/react-native-create-thumbnail + +# V2.1.0 yarn add @react-native-ohos/react-native-create-thumbnail ``` diff --git a/en/react-native-marquee.md b/en/react-native-marquee.md index 70d3a3e9..fbf39a6f 100644 --- a/en/react-native-marquee.md +++ b/en/react-native-marquee.md @@ -8,10 +8,11 @@ This project is based on [react-native-marquee@0.5.0](https://github.com/kyo504/ This third-party library has been migrated to Gitcode and is now available for direct download from npm, the new package name is: `@react-native-ohos/react-native-marquee`, The version correspondence details are as follows: -| Version | Package Name | Repository | Release | -| ------------------------- | ------------------------------------------------- | ------------------ | -------------------------- | -| <= 0.5.0-0.0.1@deprecated | @react-native-oh-tpl/react-native-marquee | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-marquee) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-marquee/releases) | -| > 0.5.1 | @react-native-ohos/react-native-marquee | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee/releases) | +| Version | Package Name | Repository | Release | Version for RN | +| ------------------------- | ------------------------------------------------- | ------------------ | -------------------------- | ------------------------- | +| <= 0.5.0-0.0.1@deprecated | @react-native-oh-tpl/react-native-marquee | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-marquee) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-marquee/releases) | 0.72 | +| > 0.5.1 | @react-native-ohos/react-native-marquee | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee/releases) | 0.72 | +| 0.6.0 | @react-native-ohos/react-native-marquee | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-marquee/releases) | 0.77 | ## 1. Installation and Usage diff --git a/en/react-native-performance.md b/en/react-native-performance.md index 8825b6b3..d8e886c4 100644 --- a/en/react-native-performance.md +++ b/en/react-native-performance.md @@ -25,15 +25,6 @@ Please refer to the Releases page of the third-party library for the correspondi | 5.1.3 | [@react-native-ohos/react-native-performance Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-performance/releases) | 0.72 | | 5.2.0 | [@react-native-ohos/react-native-performance Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-performance/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: - -| Third-party library version | Post Information | Supports RN version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 5.1.2 | [@react-native-oh-tpl/react-native-performance Releases](https://github.com/react-native-oh-library/react-native-performance/releases) | 0.72 | -| 5.2.0 | [@react-native-ohos/react-native-performance Releases]() | 0.77 | - #### **npm** diff --git a/en/react-native-signature-canvas.md b/en/react-native-signature-canvas.md index 318a2072..52bfcd3d 100644 --- a/en/react-native-signature-canvas.md +++ b/en/react-native-signature-canvas.md @@ -15,11 +15,6 @@ > [!TIP] [GitHub address](https://github.com/YanYuanFE/react-native-signature-canvas) -| Version | Version for RN | -| --------------------- | -------------------- | -| 0.72 | 0.72 | -| 0.77 | 0.77 | - ## Installation and Usage diff --git a/zh-cn/react-countdown-circle-timer.md b/zh-cn/react-countdown-circle-timer.md index c96e3ffe..19a5ba24 100644 --- a/zh-cn/react-countdown-circle-timer.md +++ b/zh-cn/react-countdown-circle-timer.md @@ -13,7 +13,7 @@ > [!TIP] [Github 地址](https://github.com/vydimitrov/react-countdown-circle-timer) ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息： +Please check the corresponding version information at the Releases page of the third-party library: | 三方库版本| 支持RN版本 | | ---------- | ---------- | diff --git a/zh-cn/react-native-signature-canvas.md b/zh-cn/react-native-signature-canvas.md index cd915681..284e226b 100644 --- a/zh-cn/react-native-signature-canvas.md +++ b/zh-cn/react-native-signature-canvas.md @@ -15,11 +15,6 @@ > [!TIP] [Github 地址](https://github.com/YanYuanFE/react-native-signature-canvas) -| Version | Version for RN | -| --------------------- | -------------------- | -| 0.72 | 0.72 | -| 0.77 | 0.77 | - ## 安装与使用 -- Gitee From c0477325eef8c5948722c9a295082dc253d997bc Mon Sep 17 00:00:00 2001 From: songzhf Date: Tue, 25 Nov 2025 15:08:04 +0800 Subject: [PATCH 3/9] =?UTF-8?q?docs:=20[Issues:=20#ID8HC4]=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: songzhf --- en/react-native-signature-canvas.md | 5 +++++ en/react-native-svg-charts.md | 4 ++-- zh-cn/react-native-cardview.md | 4 ++-- zh-cn/react-native-signature-canvas.md | 5 +++++ 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/en/react-native-signature-canvas.md b/en/react-native-signature-canvas.md index 52bfcd3d..1fe88428 100644 --- a/en/react-native-signature-canvas.md +++ b/en/react-native-signature-canvas.md @@ -17,6 +17,11 @@ ## Installation and Usage +| Version | Post Information | Supports RN version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.7.2 | [https://github.com/YanYuanFE/react-native-signature-canvas Releases](https://github.com/react-native-oh-library/react-native-svg-charts/releases) | 0.72 | +| 5.0.1 | [https://github.com/YanYuanFE/react-native-signature-canvas Releases](https://github.com/react-native-oh-library/react-native-svg-charts/releases) | 0.77 | + #### **npm** diff --git a/en/react-native-svg-charts.md b/en/react-native-svg-charts.md index 91083343..4e03aebd 100644 --- a/en/react-native-svg-charts.md +++ b/en/react-native-svg-charts.md @@ -34,7 +34,7 @@ Go to the project directory and execute the following instruction: ```bash #v5.3.0 npm install @react-native-oh-tpl/react-native-svg-charts -#v5.3.1 +#v5.4.0 npm install @react-native-ohos/react-native-svg-charts ``` @@ -43,7 +43,7 @@ npm install @react-native-ohos/react-native-svg-charts ```bash #v5.3.0 yarn add @react-native-oh-tpl/react-native-svg-charts -#v5.3.1 +#v5.4.0 yarn add @react-native-ohos/react-native-svg-charts ``` diff --git a/zh-cn/react-native-cardview.md b/zh-cn/react-native-cardview.md index 41b4da47..7ada5982 100644 --- a/zh-cn/react-native-cardview.md +++ b/zh-cn/react-native-cardview.md @@ -33,7 +33,7 @@ #2.0.3 npm install @react-native-oh-tpl/react-native-cardview -#2.0.4 +#2.1.0 npm install @react-native-ohos/react-native-cardview ``` @@ -43,7 +43,7 @@ npm install @react-native-ohos/react-native-cardview #2.0.3 yarn add @react-native-oh-tpl/react-native-cardview -#2.0.4 +#2.1.0 yarn add @react-native-ohos/react-native-cardview ``` diff --git a/zh-cn/react-native-signature-canvas.md b/zh-cn/react-native-signature-canvas.md index 284e226b..73ee24e5 100644 --- a/zh-cn/react-native-signature-canvas.md +++ b/zh-cn/react-native-signature-canvas.md @@ -18,6 +18,11 @@ ## 安装与使用 +| Version | Post Information | Supports RN version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.7.2 | [https://github.com/YanYuanFE/react-native-signature-canvas Releases](https://github.com/react-native-oh-library/react-native-svg-charts/releases) | 0.72 | +| 5.0.1 | [https://github.com/YanYuanFE/react-native-signature-canvas Releases](https://github.com/react-native-oh-library/react-native-svg-charts/releases) | 0.77 + #### **npm** -- Gitee From 09f3bd0ee0e08e05f670a43db9a147f8c5ee80af Mon Sep 17 00:00:00 2001 From: songzhf Date: Tue, 25 Nov 2025 19:59:09 +0800 Subject: [PATCH 4/9] =?UTF-8?q?docs:=20[Issues:=20#ID8HC4]=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: songzhf --- en/react-native-create-thumbnail.md | 8 ++++---- zh-cn/react-native-create-thumbnail.md | 8 ++++---- zh-cn/react-native-svg-charts.md | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/en/react-native-create-thumbnail.md b/en/react-native-create-thumbnail.md index 88f73460..b34c91e7 100644 --- a/en/react-native-create-thumbnail.md +++ b/en/react-native-create-thumbnail.md @@ -32,8 +32,8 @@ Please refer to the Releases page of the third-party library for the correspondi #### **npm** ```bash -# V2.0.0 -npm install @react-native-oh-tpl/react-native-create-thumbnail +# V2.0.1 +npm install @react-native-oh/react-native-create-thumbnail # V2.1.0 npm install @react-native-ohos/react-native-create-thumbnail @@ -42,8 +42,8 @@ npm install @react-native-ohos/react-native-create-thumbnail #### **yarn** ```bash -# V2.0.0 -yarn add @react-native-oh-tpl/react-native-create-thumbnail +# V2.0.1 +yarn add @react-native-oh/react-native-create-thumbnail # V2.1.0 yarn add @react-native-ohos/react-native-create-thumbnail diff --git a/zh-cn/react-native-create-thumbnail.md b/zh-cn/react-native-create-thumbnail.md index 600ead71..e731f07e 100644 --- a/zh-cn/react-native-create-thumbnail.md +++ b/zh-cn/react-native-create-thumbnail.md @@ -36,8 +36,8 @@ #### **npm** ```bash -# V2.0.0 -npm install @react-native-oh-tpl/react-native-create-thumbnail +# V2.0.1 +npm install @react-native-ohos/react-native-create-thumbnail # V2.1.0 npm install @react-native-ohos/react-native-create-thumbnail @@ -46,8 +46,8 @@ npm install @react-native-ohos/react-native-create-thumbnail #### **yarn** ```bash -# V2.0.0 -yarn add @react-native-oh-tpl/react-native-create-thumbnail +# V2.0.1 +yarn add @react-native-ohos/react-native-create-thumbnail # V2.1.0 yarn add @react-native-ohos/react-native-create-thumbnail diff --git a/zh-cn/react-native-svg-charts.md b/zh-cn/react-native-svg-charts.md index ae0d0631..6c519acb 100644 --- a/zh-cn/react-native-svg-charts.md +++ b/zh-cn/react-native-svg-charts.md @@ -36,7 +36,7 @@ ```bash #v5.3.0 npm install @react-native-oh-tpl/react-native-svg-charts -#v5.3.1 +#v5.4.0 npm install @react-native-ohos/react-native-svg-charts ``` @@ -45,7 +45,7 @@ npm install @react-native-ohos/react-native-svg-charts ```bash #v5.3.0 yarn add @react-native-oh-tpl/react-native-svg-charts -#v5.3.1 +#v5.4.0 yarn add @react-native-ohos/react-native-svg-charts ``` -- Gitee From 9a7b9be26ff35d38adcf57a21266994f1481b587 Mon Sep 17 00:00:00 2001 From: songzhf Date: Wed, 26 Nov 2025 10:34:23 +0800 Subject: [PATCH 5/9] =?UTF-8?q?docs:=20[Issues:=20#ID8HC4]=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: songzhf --- zh-cn/react-native-create-thumbnail.md | 28 -------------------------- 1 file changed, 28 deletions(-) diff --git a/zh-cn/react-native-create-thumbnail.md b/zh-cn/react-native-create-thumbnail.md index e731f07e..4c543217 100644 --- a/zh-cn/react-native-create-thumbnail.md +++ b/zh-cn/react-native-create-thumbnail.md @@ -36,20 +36,12 @@ #### **npm** ```bash -# V2.0.1 -npm install @react-native-ohos/react-native-create-thumbnail - -# V2.1.0 npm install @react-native-ohos/react-native-create-thumbnail ``` #### **yarn** ```bash -# V2.0.1 -yarn add @react-native-ohos/react-native-create-thumbnail - -# V2.1.0 yarn add @react-native-ohos/react-native-create-thumbnail ``` @@ -190,16 +182,6 @@ Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_nati 打开 `entry/oh-package.json5`，添加以下依赖 -- V2.0.0 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-ohos/react-native-create-thumbnail": "file:../../node_modules/@react-native-ohos/react-native-create-thumbnail/harmony/createThumbnail.har" - } -``` - -- V2.0.2 ```json "dependencies": { @@ -223,8 +205,6 @@ ohpm install 打开 `entry/oh-package.json5`，添加以下依赖 -- V2.0.0 - ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -232,14 +212,6 @@ ohpm install } ``` -- V2.0.2 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-ohos/react-native-create-thumbnail": "file:../../node_modules/@react-native-ohos/react-native-create-thumbnail/harmony/createThumbnail" - } -``` 打开终端，执行： -- Gitee From b07bf09968f35c1939a211262402e5633b1be396 Mon Sep 17 00:00:00 2001 From: songzhf Date: Wed, 26 Nov 2025 10:45:15 +0800 Subject: [PATCH 6/9] =?UTF-8?q?docs:=20[Issues:=20#ID8HC4]=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: songzhf --- en/react-native-create-thumbnail.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/en/react-native-create-thumbnail.md b/en/react-native-create-thumbnail.md index b34c91e7..1f275896 100644 --- a/en/react-native-create-thumbnail.md +++ b/en/react-native-create-thumbnail.md @@ -32,20 +32,12 @@ Please refer to the Releases page of the third-party library for the correspondi #### **npm** ```bash -# V2.0.1 -npm install @react-native-oh/react-native-create-thumbnail - -# V2.1.0 npm install @react-native-ohos/react-native-create-thumbnail ``` #### **yarn** ```bash -# V2.0.1 -yarn add @react-native-oh/react-native-create-thumbnail - -# V2.1.0 yarn add @react-native-ohos/react-native-create-thumbnail ``` -- Gitee From b4a73f6985335fa943e9870f41b1ab69dd4bcba4 Mon Sep 17 00:00:00 2001 From: songzhf Date: Wed, 26 Nov 2025 11:01:51 +0800 Subject: [PATCH 7/9] =?UTF-8?q?docs:=20[Issues:=20#ID8HC4]=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: songzhf --- en/react-native-create-thumbnail.md | 65 ++++++++++++++++++++++++++++- 1 file changed, 63 insertions(+), 2 deletions(-) diff --git a/en/react-native-create-thumbnail.md b/en/react-native-create-thumbnail.md index 1f275896..d8873bdc 100644 --- a/en/react-native-create-thumbnail.md +++ b/en/react-native-create-thumbnail.md @@ -210,7 +210,68 @@ cd entry ohpm install --no-link ``` -### 3. Introducing BlobUtilPackage to ArkTS +### 3.Configure CMakeLists and include CreateThumbnailPackage + +> [!TIP] If you are using version 2.0.0, please skip this chapter. + +打开 `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-create-thumbnail/src/main/cpp" ./create-thumbnail) +# 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_create_thumbnail) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "CreateThumbnailPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4. Introducing BlobUtilPackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: @@ -226,7 +287,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 5. Running Click the `sync` button in the upper right corner. -- Gitee From 4119c1f751fa9438e53b088a239146349ffb8d04 Mon Sep 17 00:00:00 2001 From: songzhf Date: Wed, 26 Nov 2025 11:28:15 +0800 Subject: [PATCH 8/9] =?UTF-8?q?docs:=20[Issues:=20#ID8HC4]=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: songzhf --- en/react-native-cardview.md | 8 ++++---- en/react-native-ui-lib.md | 8 ++++---- zh-cn/react-native-cardview.md | 16 ++++++++-------- zh-cn/react-native-ui-lib.md | 24 ++++++++++++------------ 4 files changed, 28 insertions(+), 28 deletions(-) diff --git a/en/react-native-cardview.md b/en/react-native-cardview.md index 9fc61680..51cd8aa2 100644 --- a/en/react-native-cardview.md +++ b/en/react-native-cardview.md @@ -32,20 +32,20 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash -#2.0.3 +#0.72 npm install @react-native-oh-tpl/react-native-cardview -#2.0.4 +#0.77 npm install @react-native-ohos/react-native-cardview ``` #### **yarn** ```bash -#2.0.3 +#0.72 yarn add @react-native-oh-tpl/react-native-cardview -#2.0.4 +#0.77 yarn add @react-native-ohos/react-native-cardview ``` diff --git a/en/react-native-ui-lib.md b/en/react-native-ui-lib.md index 16da78a9..b0472a0f 100644 --- a/en/react-native-ui-lib.md +++ b/en/react-native-ui-lib.md @@ -42,20 +42,20 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash -# V7.29.1 +# 0.72 npm install @react-native-oh-tpl/react-native-ui-lib -# V7.43.1 +# 0.77 npm install @react-native-ohos/react-native-ui-lib ``` #### **yarn** ```bash -# V7.29.1 +# 0.72 yarn add @react-native-oh-tpl/react-native-ui-lib -# V7.43.1 +# 0.77 yarn add @react-native-ohos/react-native-ui-lib ``` diff --git a/zh-cn/react-native-cardview.md b/zh-cn/react-native-cardview.md index 7ada5982..4e5df9be 100644 --- a/zh-cn/react-native-cardview.md +++ b/zh-cn/react-native-cardview.md @@ -30,20 +30,20 @@ #### **npm** ```bash -#2.0.3 +#0.72 npm install @react-native-oh-tpl/react-native-cardview -#2.1.0 +#0.77 npm install @react-native-ohos/react-native-cardview ``` #### **yarn** ```bash -#2.0.3 +#0.72 yarn add @react-native-oh-tpl/react-native-cardview -#2.1.0 +#0.77 yarn add @react-native-ohos/react-native-cardview ``` @@ -152,7 +152,7 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 -- V2.0.3 +- 0.72 ```json "dependencies": { @@ -161,7 +161,7 @@ const styles = StyleSheet.create({ } ``` -- V2.0.4 +- 0.77 ```json "dependencies": { @@ -205,10 +205,10 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -# 2.0.3 +# 0.72 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-cardview/src/main/cpp" ./card-view) -# 2.0.4 +# 0.77 + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-cardview/src/main/cpp" ./card-view) # RNOH_END: manual_package_linking_1 diff --git a/zh-cn/react-native-ui-lib.md b/zh-cn/react-native-ui-lib.md index da09e10c..a0ae5bfa 100644 --- a/zh-cn/react-native-ui-lib.md +++ b/zh-cn/react-native-ui-lib.md @@ -46,20 +46,20 @@ #### **npm** ```bash -# V7.29.1 +# 0.72 npm install @react-native-oh-tpl/react-native-ui-lib -# V7.43.1 +# 0.77 npm install @react-native-ohos/react-native-ui-lib ``` #### **yarn** ```bash -# V7.29.1 +# 0.72 yarn add @react-native-oh-tpl/react-native-ui-lib -# V7.43.1 +# 0.77 yarn add @react-native-ohos/react-native-ui-lib ``` @@ -164,7 +164,7 @@ class MyScreen extends Component { 打开 `entry/oh-package.json5`，添加以下依赖 -- V7.29.1 +- 0.72 ```json "dependencies": { @@ -173,7 +173,7 @@ class MyScreen extends Component { } ``` -- V7.43.1 +- 0.77 ```json "dependencies": { @@ -219,10 +219,10 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -# V7.29.1 +# 0.72 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-ui-lib/src/main/cpp" ./ui-lib) -# V7.43.1 +# 0.77 + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-ui-lib/src/main/cpp" ./ui-lib) # RNOH_END: manual_package_linking_1 @@ -267,10 +267,10 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... -// V7.29.1 +// 0.72 + import { HighlighterView } from "@react-native-oh-tpl/react-native-ui-lib"; -// V7.43.1 +// 0.77 + import { HighlighterView } from "@react-native-ohos/react-native-ui-lib"; @Builder @@ -306,10 +306,10 @@ const arkTsComponentNames: Array = [ ```diff ... -// V7.29.1 +// 0.72 + import { UiLibPackage } from '@react-native-oh-tpl/react-native-ui-lib/ts'; -// V7.43.1 +// 0.77 + import { UiLibPackage } from '@react-native-ohos/react-native-ui-lib/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { -- Gitee From 2ef979f4310f632cde4f810578a93fa7dadcbd08 Mon Sep 17 00:00:00 2001 From: songzhf Date: Wed, 26 Nov 2025 15:47:45 +0800 Subject: [PATCH 9/9] =?UTF-8?q?docs:=20[Issues:=20#ID8HC4]=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: songzhf --- en/react-native-cardview.md | 15 +++++++++++++++ en/react-native-svg-charts.md | 8 ++++---- en/react-native-ui-lib.md | 23 +++++++++++++++++++++++ zh-cn/react-countdown-circle-timer.md | 2 +- zh-cn/react-native-svg-charts.md | 8 ++++---- 5 files changed, 47 insertions(+), 9 deletions(-) diff --git a/en/react-native-cardview.md b/en/react-native-cardview.md index 51cd8aa2..3966336c 100644 --- a/en/react-native-cardview.md +++ b/en/react-native-cardview.md @@ -152,6 +152,8 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- 0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -159,6 +161,15 @@ Open `entry/oh-package.json5` file and add the following dependencies: } ``` +- 0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-cardview": "file:../../node_modules/@react-native-ohos/react-native-cardview/harmony/card_view.har" + } +``` + Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -194,7 +205,11 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) +# 0.72 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-cardview/src/main/cpp" ./card-view) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-cardview/src/main/cpp" ./card-view) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") diff --git a/en/react-native-svg-charts.md b/en/react-native-svg-charts.md index 4e03aebd..b45aea6d 100644 --- a/en/react-native-svg-charts.md +++ b/en/react-native-svg-charts.md @@ -32,18 +32,18 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash -#v5.3.0 +#0.72 npm install @react-native-oh-tpl/react-native-svg-charts -#v5.4.0 +#0.77 npm install @react-native-ohos/react-native-svg-charts ``` #### **yarn** ```bash -#v5.3.0 +#0.72 yarn add @react-native-oh-tpl/react-native-svg-charts -#v5.4.0 +#0.77 yarn add @react-native-ohos/react-native-svg-charts ``` diff --git a/en/react-native-ui-lib.md b/en/react-native-ui-lib.md index b0472a0f..59aa9717 100644 --- a/en/react-native-ui-lib.md +++ b/en/react-native-ui-lib.md @@ -164,6 +164,8 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- 0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -171,6 +173,15 @@ Open `entry/oh-package.json5` file and add the following dependencies: } ``` +- 0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-ui-lib": "file:../../node_modules/@react-native-ohos/react-native-ui-lib/harmony/ui_lib.har" + } +``` + Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -207,7 +218,11 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) +# 0.72 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-ui-lib/src/main/cpp" ./ui-lib) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-ui-lib/src/main/cpp" ./ui-lib) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -250,8 +265,12 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src ```diff ... +// 0.72 + import { HighlighterView } from "@react-native-oh-tpl/react-native-ui-lib"; +// 0.77 ++ import { HighlighterView } from "@react-native-ohos/react-native-ui-lib"; + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -285,8 +304,12 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co ```diff ... +// 0.72 + import { UiLibPackage } from '@react-native-oh-tpl/react-native-ui-lib/ts'; +// 0.77 ++ import { UiLibPackage } from '@react-native-ohos/react-native-ui-lib/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), diff --git a/zh-cn/react-countdown-circle-timer.md b/zh-cn/react-countdown-circle-timer.md index 19a5ba24..c96e3ffe 100644 --- a/zh-cn/react-countdown-circle-timer.md +++ b/zh-cn/react-countdown-circle-timer.md @@ -13,7 +13,7 @@ > [!TIP] [Github 地址](https://github.com/vydimitrov/react-countdown-circle-timer) ## 安装与使用 -Please check the corresponding version information at the Releases page of the third-party library: +请到三方库的 Releases 发布地址查看配套的版本信息： | 三方库版本| 支持RN版本 | | ---------- | ---------- | diff --git a/zh-cn/react-native-svg-charts.md b/zh-cn/react-native-svg-charts.md index 6c519acb..edcfc528 100644 --- a/zh-cn/react-native-svg-charts.md +++ b/zh-cn/react-native-svg-charts.md @@ -34,18 +34,18 @@ #### **npm** ```bash -#v5.3.0 +#0.72 npm install @react-native-oh-tpl/react-native-svg-charts -#v5.4.0 +#0.77 npm install @react-native-ohos/react-native-svg-charts ``` #### **yarn** ```bash -#v5.3.0 +#0.72 yarn add @react-native-oh-tpl/react-native-svg-charts -#v5.4.0 +#0.77 yarn add @react-native-ohos/react-native-svg-charts ``` -- Gitee