From 1dfbe52c70447947d7c722c3d422559fe4c58764 Mon Sep 17 00:00:00 2001 From: shaojunye Date: Tue, 25 Nov 2025 20:33:35 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#ID8NNE]=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E14=E4=B8=AA=E5=BA=93=E7=9A=840.77=E7=89=88=E6=9C=AC?= =?UTF-8?q?=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: shaojunye --- en/Shopify-restyle.md | 14 + en/ant-design-react-native.md | 58 +++- en/react-native-autocomplete-dropdown.md | 18 +- en/react-native-blob-util.md | 6 +- ...-util\357\274\210nocodegen\357\274\211.md" | 50 +++- en/react-native-chart-kit.md | 7 +- en/react-native-community-blur.md | 36 ++- en/react-native-community-datetimepicker.md | 48 +++- en/react-native-copilot.md | 14 + en/react-native-drag-sort.md | 29 +- en/react-native-error-boundary.md | 58 +++- en/react-native-masked-view-masked-view.md | 9 + en/react-native-picker.md | 43 ++- en/react-native-shake.md | 9 +- en/react-navigation-header-buttons.md | 10 + zh-cn/Shopify-restyle.md | 40 ++- zh-cn/ant-design-react-native.md | 56 +++- zh-cn/react-native-autocomplete-dropdown.md | 106 ++++---- zh-cn/react-native-blob-util.md | 80 +++++- ...-util\357\274\210nocodegen\357\274\211.md" | 54 +++- zh-cn/react-native-chart-kit.md | 252 +++++++++--------- zh-cn/react-native-community-blur.md | 119 ++++++--- .../react-native-community-datetimepicker.md | 118 +++++--- zh-cn/react-native-copilot.md | 38 ++- zh-cn/react-native-drag-sort.md | 204 +++++++------- zh-cn/react-native-error-boundary.md | 245 ++++++++++++----- zh-cn/react-native-masked-view-masked-view.md | 22 +- zh-cn/react-native-picker.md | 65 ++++- zh-cn/react-native-shake.md | 16 +- zh-cn/react-navigation-header-buttons.md | 86 +++--- 30 files changed, 1375 insertions(+), 535 deletions(-) diff --git a/en/Shopify-restyle.md b/en/Shopify-restyle.md index 22c5f8ad2..bc6f491d3 100644 --- a/en/Shopify-restyle.md +++ b/en/Shopify-restyle.md @@ -16,6 +16,11 @@ ## Installation and Usage +| Version | RN Version | +| ---------- | ---------- | +| 2.4.4 | 0.72 | +| 2.4.5 | 0.77 | + Go to the project directory and execute the following instruction: @@ -23,13 +28,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# V2.4.4 npm install @shopify/restyle@2.4.4 + +# V2.4.5 +npm install @shopify/restyle@2.4.5 ``` #### **yarn** ```bash +# V2.4.4 yarn add @shopify/restyle@2.4.4 + +# V2.4.5 +yarn add @shopify/restyle@2.4.5 ``` @@ -108,6 +121,7 @@ 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.400; ROM：3.0.0.25 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## Hooks diff --git a/en/ant-design-react-native.md b/en/ant-design-react-native.md index c88f7c58b..b25abafff 100644 --- a/en/ant-design-react-native.md +++ b/en/ant-design-react-native.md @@ -16,6 +16,11 @@ ## Installation and Usage +| Version | RN Version | +| ---------- | ---------- | +| 5.2.2 | 0.72 | +| 5.4.2 | 0.77 | + Go to the project directory and execute the following instruction: @@ -23,15 +28,30 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# V5.2.2 npm install @ant-design/react-native@5.2.2 + +# V5.4.2 +npm install @ant-design/react-native@5.4.2 ``` #### **yarn** ```bash +# V5.2.2 yarn add @ant-design/react-native@5.2.2 + +# V5.4.2 +yarn add @ant-design/react-native@5.4.2 ``` +> [!TIP] The library dependency +> +> V5.2.2：[@react-native-oh-tpl/slider](/zh-cn/react-native-community-slider.md)、[@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-modal-popover](/zh-cn/react-native-modal-popover.md)、[@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md)和[react-native-community/segmented-control](/zh-cn/react-native-community-segmented-control.md) +> +> V5.4.2：[@react-native-ohos/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md)、[@react-native-ohos/react-native-modal-popover](/zh-cn/react-native-modal-popover.md)和[@react-native-ohos/react-native-reanimated](/zh-cn/react-native-reanimated.md) +> + > [!TIP] The library specifies that in version 5.2.2, the corresponding dependency ^ in package.json needs to be removed after the dependency installation command is executed > > "@ant-design/react-native": "^5.2.2" 改为 "@ant-design/react-native": "5.2.2" @@ -188,6 +208,8 @@ export default class BasicTagExample extends React.Component { ## Link +V5.2.2 + > [!TIP] @react-native-oh-tpl/react-native-gesture-handler Version: v2.14.7 > [!TIP] @react-native-oh-tpl/slider Version: v4.4.3-0.3.2 @@ -208,15 +230,30 @@ If it is not included, follow the guides to add it to your project: - [@react-native-oh-tpl/react-native-reanimated](/en/react-native-reanimated.md) +V5.4.2 + +> [!TIP] @react-native-oh-tpl/react-native-gesture-handler Version: v2.14.7 + +> [!TIP] @react-native-oh-tpl/react-native-modal-popover Version: v2.1.3-0.0.1 + +> [!TIP] @react-native-oh-tpl/react-native-reanimated Version: v3.6.2 + +The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-gesture-handler 、@react-native-oh-tpl/react-native-reanimated and@react-native-oh-tpl/react-native-modal-popover. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. + +If it is not included, follow the guides to add it to your project: + +- [@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md) +- [@react-native-oh-tpl/react-native-modal-popover](/zh-cn/react-native-modal-popover.md) +- [@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md) + ## Constraints ### Compatibility This document is verified based on the following versions: -1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25; - -## Component +1. RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. @@ -519,7 +556,7 @@ For details, see [ant-design-mobile-rn](http://rn.mobile.ant.design/docs/react/i | :----------------: | :------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------: | :------: | :------: | :---------------: | | data | 数据源 | `PickerColumn` / `PickerColumn[]` | No | All | Yes | | value | 选中项 | `PickerValue[]` | No | All | Yes | -| defaultValue | 默认选中项 | `PickerValue[]` | No | No | No | +| defaultValue | 默认选中项 | `PickerValue[]` | No | All | Yes | | cascade | 是否级联。子级来自`data`参数内的`children` | Boolean | No | All | Yes | | cols | 列数 | Number | No | All | Yes | | onChange | 选中后的回调 | `(value: PickerValue[], extend: PickerValueExtend) => void` | No | All | Yes | @@ -630,7 +667,7 @@ For details, see [ant-design-mobile-rn](http://rn.mobile.ant.design/docs/react/i | Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------: | :---------------------------: | :-------------------------------------------: | :------: | :------: | :---------------: | -| defaultChecked | 初始是否选中 | Boolean | No | No | No | +| defaultChecked | 初始是否选中 | Boolean | No | All | Yes | | checked | 指定当前是否选中 | Boolean | No | All | Yes | | disabled | 禁用 | Boolean | No | All | Yes | | onChange | change 事件触发的回调函数 | (e: { target: { checked: boolean } }) => void | No | All | Yes | @@ -1142,15 +1179,12 @@ For details, see [ant-design-mobile-rn](http://rn.mobile.ant.design/docs/react/i ## Known Issues -- [ ] PickerView 组件在 harmony 暂不支持，待ArkUI规格升级之后再重新适配 -- [ ] Input.TextArea 组件在 harmony 暂不支持，待ArkUI规格升级之后再重新适配 +- [ ] Drawer 组件暂时无法支持，与 Android/IOS 一致[issue#1352](https://github.com/ant-design/ant-design-mobile-rn/issues/1352)、[issue#1338](https://github.com/ant-design/ant-design-mobile-rn/issues/1338)。 +- [ ] Tooltip 组件气泡位置异常展示，与 Android/IOS 一致[issue#1376](https://github.com/ant-design/ant-design-mobile-rn/issues/1376)。 -## Others -- Drawer 组件暂时无法支持，与 Android/IOS 一致[issue#1352](https://github.com/ant-design/ant-design-mobile-rn/issues/1352)、[issue#1338](https://github.com/ant-design/ant-design-mobile-rn/issues/1338)。 -- Tooltip 组件气泡位置异常展示，与 Android/IOS 一致[issue#1376](https://github.com/ant-design/ant-design-mobile-rn/issues/1376)。 -- Radio 组件的 defaultCheck 属性无法正常生效，与 Android/IOS 一致[issue#1380](https://github.com/ant-design/ant-design-mobile-rn/issues/1380)。 -- Picker 组件的 defaultValue 属性无法正常生效，与 Android/IOS 一致[issue#1381](https://github.com/ant-design/ant-design-mobile-rn/issues/1381)。 + +## Others ## License diff --git a/en/react-native-autocomplete-dropdown.md b/en/react-native-autocomplete-dropdown.md index f718a0d2b..be084b3be 100644 --- a/en/react-native-autocomplete-dropdown.md +++ b/en/react-native-autocomplete-dropdown.md @@ -18,18 +18,31 @@ ## Installation and Usage +| Version | RN Version | +| ---------- | ---------- | +| 4.0.0 | 0.72 | +| 4.3.1 | 0.77 | + #### npm ```bash -npm install react-native-autocomplete-dropdown@4.0.0-rc.5 +# V4.0.0 +npm install react-native-autocomplete-dropdown@4.0.0 + +# V4.3.1 +npm install react-native-autocomplete-dropdown@4.3.1 ``` #### yarn ```bash -yarn add react-native-autocomplete-dropdown@4.0.0-rc.5 +# V4.0.0 +yarn add react-native-autocomplete-dropdown@4.0.0 + +# V4.3.1 +yarn add react-native-autocomplete-dropdown@4.3.1 ``` @@ -103,6 +116,7 @@ If it is not included, follow the guide provided in @react-native-oh-tpl/react-n This document is verified based on the following versions: 1. RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## Properties diff --git a/en/react-native-blob-util.md b/en/react-native-blob-util.md index 8a4b7ccf1..2aac0cc22 100644 --- a/en/react-native-blob-util.md +++ b/en/react-native-blob-util.md @@ -24,7 +24,8 @@ This third-party library has been migrated to Gitcode and is now available for d ## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-ohos/react-native-blob-util Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-blob-util/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. + +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: @@ -491,7 +492,10 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. Check the release version information in the release address of the third-party library: [@react-native-ohos/react-native-blob-util Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-blob-util/releases) +The content of this document has been verified based on the following versions: +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## APIs > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. diff --git "a/en/react-native-blob-util\357\274\210nocodegen\357\274\211.md" "b/en/react-native-blob-util\357\274\210nocodegen\357\274\211.md" index 877907ccf..34269836c 100644 --- "a/en/react-native-blob-util\357\274\210nocodegen\357\274\211.md" +++ "b/en/react-native-blob-util\357\274\210nocodegen\357\274\211.md" @@ -16,7 +16,12 @@ ## Installation and Usage -Find the matching version information in the release address of the third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases). +Please refer to the Release page of the corresponding third-party library for version information: + +| Version | Releases | RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.19.6 | [@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) | 0.72 | +| 0.22.2 | [@react-native-ohos/react-native-blob-util Releases]() | 0.77 | Go to the project directory and execute the following instructions: @@ -27,13 +32,21 @@ Go to the project directory and execute the following instructions: #### **npm** ```bash +# V0.19.6 npm install @react-native-oh-tpl/react-native-blob-util@file:# + +# V0.22.2 +npm install @react-native-ohos/react-native-blob-util@file:# ``` #### **yarn** ```bash +# V0.19.6 yarn add @react-native-oh-tpl/react-native-blob-util@file:# + +# V0.22.2 +yarn add @react-native-ohos/react-native-blob-util@file:# ``` @@ -428,6 +441,16 @@ Open `entry/oh-package.json5` and add the following dependencies: } ``` + +- V0.22.2 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-blob-util": "file:../../node_modules/@react-native-ohos/react-native-blob-util/harmony/blobUtil.har" + } +``` + Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -464,7 +487,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: rnoh_blob_util add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V0.19.6 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-blob-util/src/main/cpp" ./blob-util) + +# V0.22.2 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-blob-util/src/main/cpp" ./blob-util) + # RNOH_END: rnoh_blob_util file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -496,6 +525,9 @@ std::vector> PackageProvider::getPackages(Package::Cont return { std::make_shared(ctx), std::make_shared(ctx), +# V0.19.6 ++ std::make_shared(ctx), +# V0.22.2 + std::make_shared(ctx), }; } @@ -507,8 +539,12 @@ Open `entry/src/main/ets/RNPackagesFactory.ts` and add the following code: ```diff ... +// V0.19.6 + import {BlobUtilPackage} from '@react-native-oh-tpl/react-native-blob-util/ts'; +// V0.22.2 ++ import {BlobUtilPackage} from '@react-native-ohos/react-native-blob-util/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -536,7 +572,17 @@ Build and run the code. To use this library, you need to use the correct React Native and RNOH versions. In addition, use the matching DevEco Studio and the ROM on your phone. -Find the matching version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases). +Please refer to the Release page of the corresponding third-party library for version information: + +| Version | Releases | RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.19.6 | [@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) | 0.72 | +| 0.22.2 | [@react-native-ohos/react-native-blob-util Releases]() | 0.77 | + +The content of this document has been verified based on the following versions: + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## API diff --git a/en/react-native-chart-kit.md b/en/react-native-chart-kit.md index d2c634430..60ca47496 100644 --- a/en/react-native-chart-kit.md +++ b/en/react-native-chart-kit.md @@ -23,6 +23,10 @@ ## Installation and Usage +| Version | RN Version | +| ---------- | ---------- | +| 6.12.0 | 0.72/0.77 | + Go to the project directory and execute the following instruction: @@ -123,6 +127,7 @@ To use this repository, you need to use the correct React-Native and RNOH versio This document is verified based on the following versions: 1. RNOH: 0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.300SP1; ROM：3.0.0.18; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## Properties (If Any) @@ -194,7 +199,7 @@ This document is verified based on the following versions: | | | | | | | | ---- | -------------------------------------- | ------ | -------- | -------- | ----------------- | | Name | Description | Type | Required | Platform | HarmonyOS Support | -| bezier | Data for the chart - see example above | Object | No | All | Yes | +| bezier | Smooth and bend the line chart | boolean | No | All | Yes | ### Progress Ring diff --git a/en/react-native-community-blur.md b/en/react-native-community-blur.md index f1747073f..d4a36f805 100644 --- a/en/react-native-community-blur.md +++ b/en/react-native-community-blur.md @@ -18,7 +18,14 @@ This library has been adapted to C-API versions starting from version 4.4.0-0.1.0. The C-API versions offer better performance and speed compared to the ArkTS versions. -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-community-blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +Please refer to the Release page of the corresponding third-party library for version information:： + +| Version | Releases | RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.4.0 | [@react-native-oh-tpl/react-native-community-blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) | 0.72 | +| 4.5.0 | [@react-native-ohos/react-native-community-blur 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: @@ -29,13 +36,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# V4.4.0 npm install @react-native-oh-tpl/blur + +# V4.5.0 +npm install @react-native-ohos/blur ``` #### **yarn** ```bash +# V4.4.0 yarn add @react-native-oh-tpl/blur + +# V4.5.0 +yarn add @react-native-ohos/blur ``` @@ -265,7 +280,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: add_package_subdirectories add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V4.4.0 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/blur/src/main/cpp" ./blur) + +# V4.5.0 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/blur/src/main/cpp" ./blur) + # RNOH_END: add_package_subdirectories add_library(rnoh_app SHARED @@ -351,7 +372,18 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-community-blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) +Please refer to the Release page of the corresponding third-party library for version information: + +| Version | Releases | RN Releases | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.4.0 | [@react-native-oh-tpl/react-native-community-blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) | 0.72 | +| 4.5.0 | [@react-native-ohos/react-native-community-blur Releases]() | 0.77 | + + +The content of this document has been verified based on the following versions: + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## Properties diff --git a/en/react-native-community-datetimepicker.md b/en/react-native-community-datetimepicker.md index a6ccdea9e..7a440bbfe 100644 --- a/en/react-native-community-datetimepicker.md +++ b/en/react-native-community-datetimepicker.md @@ -15,8 +15,14 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/datetimepicker) ## Installation and Usage +Please refer to the Release page of the corresponding third-party library for version information: -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/datetimepicker Releases](https://github.com/react-native-oh-library/datetimepicker/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. +| Version | Releases | RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 7.6.2 | [@react-native-oh-tpl/datetimepicker Releases](https://github.com/react-native-oh-library/datetimepicker/releases) | 0.72 | +| 8.4.3 | [@react-native-ohos/datetimepicker 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: @@ -27,13 +33,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# V7.6.2 npm install @react-native-oh-tpl/datetimepicker + +# V8.4.3 +npm install @react-native-ohos/datetimepicker ``` #### **yarn** ```bash +# V7.6.2 yarn add @react-native-oh-tpl/datetimepicker + +# V8.4.3 +yarn add @react-native-ohos/datetimepicker ``` @@ -121,6 +135,8 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- V7.6.2 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -128,6 +144,14 @@ Open `entry/oh-package.json5` file and add the following dependencies: "@react-native-oh-tpl/datetimepicker": "file:../../node_modules/@react-native-oh-tpl/datetimepicker/harmony/datetimepicker.har" } ``` +- V8.4.3 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-ohos/datetimepicker": "file:../../node_modules/@react-native-ohos/datetimepicker/harmony/datetimepicker.har" +} Click the `sync` button in the upper right corner. @@ -164,7 +188,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V7.6.2 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/datetimepicker/src/main/cpp" ./datetimepicker) + +# V8.4.3 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/datetimepicker/src/main/cpp" ./datetimepicker) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -207,8 +237,12 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src ```diff ... +// V7.6.2 + import { RNDateTimePicker, DATETIME_PICKER_VIEW_TYPE } from "@react-native-oh-tpl/datetimepicker" +// V8.4.3 ++ import { RNDateTimePicker, DATETIME_PICKER_VIEW_TYPE } from "@react-native-ohos/datetimepicker" + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -255,7 +289,17 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/datetimepicker Releases](https://github.com/react-native-oh-library/datetimepicker/releases) +Please refer to the Release page of the corresponding third-party library for version information: + +| Version | Releases | RN Releases | +| ---------- | ------------------------------------------------------------ | ---------- | +| 7.6.2 | [@react-native-oh-tpl/datetimepicker Releases](https://github.com/react-native-oh-library/datetimepicker/releases) | 0.72 | +| 8.4.3 | [@react-native-ohos/datetimepicker Releases]() | 0.77 | + +The content of this document has been verified based on the following versions: + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## Properties diff --git a/en/react-native-copilot.md b/en/react-native-copilot.md index d4644b62b..5ce678995 100644 --- a/en/react-native-copilot.md +++ b/en/react-native-copilot.md @@ -17,6 +17,11 @@ ## Installation and Usage +| Version | RN Version | +| ---------- | ---------- | +| 3.3.2 | 0.72 | +| 3.3.3 | 0.77 | + Go to the project directory and execute the following instruction: @@ -24,13 +29,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# V3.3.2 npm install --save react-native-copilot@3.3.2 + +# V3.3.3 +npm install --save react-native-copilot@3.3.3 ``` #### **yarn** ```bash +# V3.3.2 yarn add react-native-copilot@3.3.2 + +# V3.3.3 +yarn add react-native-copilot@3.3.3 ``` @@ -228,6 +241,7 @@ This document is verified based on the following versions: 1. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## Properties diff --git a/en/react-native-drag-sort.md b/en/react-native-drag-sort.md index d85f507c0..5a811cb34 100644 --- a/en/react-native-drag-sort.md +++ b/en/react-native-drag-sort.md @@ -17,7 +17,14 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-drag-sort Releases](https://github.com/react-native-oh-library/react-native-drag-sort/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. + +Please refer to the Release page of the corresponding third-party library for version information: +| Version | Releases | RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.4.4 | [@react-native-oh-tpl/react-native-drag-sort Releases](https://github.com/react-native-oh-library/react-native-drag-sort/releases) | 0.72 | +| 2.5.0 | [@react-native-ohos/react-native-drag-sort 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: @@ -28,13 +35,21 @@ Go to the project directory and execute the following instruction: #### **yarn** ```bash +# V2.4.4 yarn add @react-native-oh-tpl/react-native-drag-sort + +# V2.5.0 +yarn add @react-native-ohos/react-native-drag-sort ``` #### **npm** ```bash +# V2.4.4 npm install @react-native-oh-tpl/react-native-drag-sort + +# V2.5.0 +npm install @react-native-ohos/react-native-drag-sort ``` ### Tip @@ -571,7 +586,17 @@ const styles = StyleSheet.create({ 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-drag-sort Releases](https://github.com/react-native-oh-library/react-native-drag-sort/releases) + +Please refer to the Release page of the corresponding third-party library for version information: +| Version | Releases | RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.4.4 | [@react-native-oh-tpl/react-native-drag-sort Releases](https://github.com/react-native-oh-library/react-native-drag-sort/releases) | 0.72 | +| 2.5.0 | [@react-native-ohos/react-native-drag-sort Releases]() | 0.77 | + +The content of this document has been verified based on the following versions: + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## Properties diff --git a/en/react-native-error-boundary.md b/en/react-native-error-boundary.md index 920114914..863c1b132 100644 --- a/en/react-native-error-boundary.md +++ b/en/react-native-error-boundary.md @@ -17,6 +17,12 @@ ## Installation and Usage +| Version | RN Version | +| ---------- | ---------- | +| 12.0.0 | 0.72 | +| 13.0.0 | 0.77 | + + Go to the project directory and execute the following instruction: @@ -24,13 +30,50 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash -npm i react-native-error-boundary@1.2.4 +# V12.0.0 +npm i react-navigation-header-buttons@12.0.0 + +# V13.0.0 +npm i react-navigation-header-buttons@13.0.0 ``` #### **yarn** ```bash -yarn add react-native-error-boundary@1.2.4 +# V12.0.0 +yarn add react-navigation-header-buttons@12.0.0 + +# V13.0.0 +yarn add react-navigation-header-buttons@13.0.0 +``` + + +Add the following code to the tsconfig. json file: +```json +"compilerOptions": { + ... + "paths": { + ... + "react-navigation-header-buttons":[ + "./node_modules/react-navigation-header-buttons/lib/module/index.js" + ] + }, + } + +``` +Add the following code to the metro.config.js file: +```js +const config = { +... + resolver: { + unstable_enablePackageExports: true, + }, +}; +module.exports = mergeConfig( + ... + config, +); + ``` @@ -77,6 +120,16 @@ const styles = StyleSheet.create({ }); ``` +## Link + +This library relies on the following third-party libraries, please refer to the corresponding documentation: + +- [@react-navigation/native](/zh-cn/react-navigation-native.md) +- [@react-navigation/elements](/zh-cn/react-navigation-elements.md) +- [react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md) + +If the library has already been introduced in the HarmonyOS project, there is no need to introduce it again. If it has not been introduced, please refer to the [@ react navigation/native document] (/zh cn/react navigation native. md), [@ react navigation/elements document] (/zh cn/react navigation elements. md), and [react native sea area context document] (/zh cn/react native sea area context. md) for introduction + ## Constraints ### Compatibility @@ -85,6 +138,7 @@ This document is verified based on the following versions: 1. RNOH: 0.72.27; SDK: HarmonyOS-NEXT-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400; ROM: 3.0.0.25; 2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## Properties diff --git a/en/react-native-masked-view-masked-view.md b/en/react-native-masked-view-masked-view.md index aff768367..0c047ed0b 100644 --- a/en/react-native-masked-view-masked-view.md +++ b/en/react-native-masked-view-masked-view.md @@ -35,12 +35,16 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash + npm install @react-native-ohos/masked-view ``` #### **yarn** ```bash + + +# V0.2.11 yarn add @react-native-ohos/masked-view ``` @@ -247,6 +251,11 @@ Please refer to the Releases page of the third-party library for the correspondi | 0.2.11 | [@react-native-ohos/masked-view Releases](https://gitcode.com/openharmony-sig/rntpc_masked-view/releases) | 0.72 | | 0.3.3 | [@react-native-ohos/masked-view Releases](https://gitcode.com/openharmony-sig/rntpc_masked-view/releases) | 0.77 | +The content of this document has been verified based on the following versions: + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; + ## Properties > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. diff --git a/en/react-native-picker.md b/en/react-native-picker.md index 493b50918..baef455a3 100644 --- a/en/react-native-picker.md +++ b/en/react-native-picker.md @@ -16,7 +16,14 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-picker Releases](https://github.com/react-native-oh-library/react-native-picker/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. + +Please refer to the Release page of the corresponding third-party library for version information: +| Version | Releases | RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.3.9 | [@react-native-oh-tpl/react-native-picker Releases](https://github.com/react-native-oh-library/react-native-picker/releases) | 0.72 | +| 4.4.0 | [@react-native-ohos/react-native-picker 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: @@ -27,13 +34,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-picker + +# 0.77 +npm install @react-native-ohos/react-native-picker ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-picker + +# 0.77 +yarn add @react-native-ohos/react-native-picker ``` @@ -139,13 +154,19 @@ 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", "@react-native-oh-tpl/react-native-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-picker/harmony/picker.har" } ``` - +- 0.77 +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-picker": "file:../../node_modules/@react-native-ohos/react-native-picker/harmony/picker.har" + } Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -181,7 +202,10 @@ 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-picker/src/main/cpp" ./picker) +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-picker/src/main/cpp" ./picker) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -224,7 +248,10 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co ```diff ... + // 0.72 + import { PickerViewPackage } from "@react-native-oh-tpl/react-native-picker/ts" + // 0.77 ++ import { PickerViewPackage } from "@react-native-ohos/react-native-picker/ts" export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -252,7 +279,17 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-picker Releases](https://github.com/react-native-oh-library/react-native-picker/releases) + +Please refer to the Release page of the corresponding third-party library for version information: +| Version | Releases | RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.3.9 | [@react-native-oh-tpl/react-native-picker Releases](https://github.com/react-native-oh-library/react-native-picker/releases) | 0.72 | +| 4.4.0 | [@react-native-ohos/react-native-picker Releases]() | 0.77 | + +The content of this document has been verified based on the following versions: + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## Properties diff --git a/en/react-native-shake.md b/en/react-native-shake.md index cfe5a4ea3..328a4d6c6 100644 --- a/en/react-native-shake.md +++ b/en/react-native-shake.md @@ -22,7 +22,7 @@ Please refer to the Releases page of the third-party library for the correspondi | ---------- | ------------------------------------------------------------ | ---------- | | 5.6.2@deprecated | [@react-native-oh-tpl/react-native-shake Releases(deprecated)](https://github.com/react-native-oh-library/react-native-shake/releases) | 0.72 | | 5.6.3 | [@react-native-ohos/react-native-shake Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-shake/releases) | 0.72 | -| 6.0.1 | [@react-native-ohos/react-native-shake Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-shake/releases) | 0.77 | +| 6.0.2 | [@react-native-ohos/react-native-shake Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-shake/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. @@ -243,7 +243,12 @@ Please refer to the Releases page of the third-party library for the correspondi | ---------- | ------------------------------------------------------------ | ---------- | | 5.6.2@deprecated | [@react-native-oh-tpl/react-native-shake Releases(deprecated)](https://github.com/react-native-oh-library/react-native-shake/releases) | 0.72 | | 5.6.3 | [@react-native-ohos/react-native-shake Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-shake/releases) | 0.72 | -| 6.0.1 | [@react-native-ohos/react-native-shake Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-shake/releases) | 0.77 | +| 6.0.2 | [@react-native-ohos/react-native-shake Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-shake/releases) | 0.77 | + +The content of this document has been verified based on the following versions: + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ### Permission Requirements diff --git a/en/react-navigation-header-buttons.md b/en/react-navigation-header-buttons.md index 0ade800c1..ed716ae0e 100644 --- a/en/react-navigation-header-buttons.md +++ b/en/react-navigation-header-buttons.md @@ -17,6 +17,10 @@ ## Installation and Usage +| Version | RN Version | +| ---------- | ---------- | +| 12.0.0 | 0.72 | +| 13.0.0 | 0.77 | Go to the project directory and execute the following instruction: @@ -24,12 +28,17 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# V12.0.0 npm i react-navigation-header-buttons@12.0.0 + +# V13.0.0 +npm i react-navigation-header-buttons@13.0.0 ``` #### **yarn** ```bash +# V12.0.0 yarn add react-navigation-header-buttons@12.0.0 ``` @@ -146,6 +155,7 @@ This document is verified based on the following versions: 1. RNOH: 0.72.26; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.300SP2; ROM:3.0.0.24(Canary3); 2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## Properties diff --git a/zh-cn/Shopify-restyle.md b/zh-cn/Shopify-restyle.md index 1af080c13..0adc7812e 100644 --- a/zh-cn/Shopify-restyle.md +++ b/zh-cn/Shopify-restyle.md @@ -16,6 +16,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 2.4.4 | 0.72 | +| 2.4.5 | 0.77 | + 进入到工程目录并输入以下命令： @@ -23,13 +28,21 @@ #### **npm** ```bash +# V2.4.4 npm install @shopify/restyle@2.4.4 + +# V2.4.5 +npm install @shopify/restyle@2.4.5 ``` #### **yarn** ```bash +# V2.4.4 yarn add @shopify/restyle@2.4.4 + +# V2.4.5 +yarn add @shopify/restyle@2.4.5 ``` @@ -108,6 +121,7 @@ export const App = () => ( 1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## Hooks @@ -121,9 +135,9 @@ export const App = () => ( | Name | Description | Type | Required | Platform | HarmonyOS Support | |:-----------------:|:-----------------------------------------------------------------------------------------------:|:--------:|:--------:|:--------:|:-----------------:| -| useTheme | Retrieve attribute objects from the theme | function | No | All | Yes | -| useRestyle | Dynamically styles reaction components based on a theme and a set of rules for resetting styles | function | No | All | Yes | -| useResponsiveProp | Fetching the value of a responsive prop in a custom component | function | No | All | Yes | +| `useTheme` | 从主题中检索属性对象 | function | No | All | Yes | +| `useRestyle` | 基于主题和一组样式重置规则动态设置组件样式 | function | No | All | Yes | +| `useResponsiveProp` | 获取自定义组件中响应式属性的值 | function | No | All | Yes | ## 方法 @@ -135,12 +149,12 @@ export const App = () => ( > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|:----------------------:|:------------------------------------------------------------------------------:|:--------:|:--------:|:--------:|:-----------------:| -| createTheme | Defining a Theme | function | No | All | Yes | -| createVariant | Provides a flexible way to handle style changes in a theme | function | No | All | Yes | -| createRestyleFunction | Creating a Predefined Restyle | function | No | All | Yes | -| createRestyleComponent | To create a custom component, you need to set the predefined Restyle function. | function | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---: | :---: | :---: | :---: | :---: | :---: | +| `createTheme` | 定义主题 | function | No | All | Yes | +| `createVariant` | 提供一种灵活的方式来处理主题中的样式变化 | function | No | All | Yes | +| `createRestyleFunction` | 创建预定义的 Restyle | function | No | All | Yes | +| `createRestyleComponent` | 创建自定义组件时，需要设置预定义的 Restyle 函数。 | function | No | All | Yes | ## 预定义组件 @@ -154,9 +168,9 @@ export const App = () => ( | Name | Description | Type | Required | Platform | HarmonyOS Support | |:-------------:|:----------------------------------------------:|:--------:|:--------:|:--------:|:-----------------:| -| createText | Predefined Text component | function | No | All | Yes | -| createBox | Predefined Box component | function | No | All | Yes | -| ThemeProvider | Set the theme to the outermost React component | function | No | All | Yes | +| `createText` | 预定义的 Text 组件 | function | No | All | Yes | +| `createBox` | 预定义的 Box 组件 | function | No | All | Yes | +| `ThemeProvider` | 将主题设置给最外层的 React 组件 | function | No | All | Yes | ## 预定义 Restyle 函数 @@ -196,4 +210,4 @@ export const App = () => ( ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/Shopify/restyle/blob/master/LICENSE.md)，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/Shopify/restyle/blob/master/LICENSE.md)，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/ant-design-react-native.md b/zh-cn/ant-design-react-native.md index e1f10ba0b..ec6549f19 100644 --- a/zh-cn/ant-design-react-native.md +++ b/zh-cn/ant-design-react-native.md @@ -16,6 +16,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 5.2.2 | 0.72 | +| 5.4.2 | 0.77 | + 进入到工程目录并输入以下命令： @@ -23,16 +28,29 @@ #### **npm** ```bash +# V5.2.2 npm install @ant-design/react-native@5.2.2 + +# V5.4.2 +npm install @ant-design/react-native@5.4.2 ``` #### **yarn** ```bash +# V5.2.2 yarn add @ant-design/react-native@5.2.2 + +# V5.4.2 +yarn add @ant-design/react-native@5.4.2 ``` -> [!TIP] 本库还依赖了[@react-native-oh-tpl/slider](/zh-cn/react-native-community-slider.md)、[@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-modal-popover](/zh-cn/react-native-modal-popover.md)、[@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md)和[react-native-community/segmented-control](/zh-cn/react-native-community-segmented-control.md) +> [!TIP] 本库还依赖了 +> +> V5.2.2：[@react-native-oh-tpl/slider](/zh-cn/react-native-community-slider.md)、[@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-modal-popover](/zh-cn/react-native-modal-popover.md)、[@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md)和[react-native-community/segmented-control](/zh-cn/react-native-community-segmented-control.md) +> +> V5.4.2：[@react-native-ohos/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md)、[@react-native-ohos/react-native-modal-popover](/zh-cn/react-native-modal-popover.md)和[@react-native-ohos/react-native-reanimated](/zh-cn/react-native-reanimated.md) +> > [!TIP] 本库指定5.2.2版本,在执行完依赖安装命令后需要去除掉package.json中对应依赖项中的^ > @@ -191,6 +209,8 @@ export default class BasicTagExample extends React.Component { ## Link +V5.2.2 + > [!TIP] @react-native-oh-tpl/react-native-gesture-handler 安装 v2.14.7 版本配套使用 > [!TIP] @react-native-oh-tpl/slider 安装 v4.4.3-0.3.2 版本配套使用 @@ -204,11 +224,24 @@ export default class BasicTagExample extends React.Component { 如未引入请参照文档进行引入 - [@react-native-oh-tpl/slider 引入方法](/zh-cn/react-native-community-slider.md) - - [@react-native-oh-tpl/react-native-gesture-handler 引入方法](/zh-cn/react-native-gesture-handler.md) - - [@react-native-oh-tpl/react-native-modal-popover 引入方法](/zh-cn/react-native-modal-popover.md) +- [@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md) + +V5.4.2 +> [!TIP] @react-native-oh-tpl/react-native-gesture-handler 安装 v2.14.7 版本配套使用 + +> [!TIP] @react-native-oh-tpl/react-native-modal-popover 安装 v2.1.3-0.0.1 版本配套使用 + +> [!TIP] @react-native-oh-tpl/react-native-reanimated 安装 v3.6.2 版本配套使用 + +本库 HarmonyOS 侧实现依赖 @react-native-oh-tpl/react-native-gesture-handler 、@react-native-oh-tpl/react-native-reanimated 和@react-native-oh-tpl/react-native-modal-popover 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参照文档进行引入 + +- [@react-native-oh-tpl/react-native-gesture-handler 引入方法](/zh-cn/react-native-gesture-handler.md) +- [@react-native-oh-tpl/react-native-modal-popover 引入方法](/zh-cn/react-native-modal-popover.md) - [@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md) ## 约束与限制 @@ -218,6 +251,7 @@ export default class BasicTagExample extends React.Component { 本文档内容基于以下版本验证通过： 1. RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## 组件 @@ -522,7 +556,7 @@ export default class BasicTagExample extends React.Component { | :----------------: | :------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------: | :------: | :------: | :---------------: | | data | 数据源 | `PickerColumn` / `PickerColumn[]` | No | All | Yes | | value | 选中项 | `PickerValue[]` | No | All | Yes | -| defaultValue | 默认选中项 | `PickerValue[]` | No | No | No | +| defaultValue | 默认选中项 | `PickerValue[]` | No | All | Yes | | cascade | 是否级联。子级来自`data`参数内的`children` | Boolean | No | All | Yes | | cols | 列数 | Number | No | All | Yes | | onChange | 选中后的回调 | `(value: PickerValue[], extend: PickerValueExtend) => void` | No | All | Yes | @@ -631,7 +665,7 @@ export default class BasicTagExample extends React.Component { | Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------: | :---------------------------: | :-------------------------------------------: | :------: | :------: | :---------------: | -| defaultChecked | 初始是否选中 | Boolean | No | No | No | +| defaultChecked | 初始是否选中 | Boolean | No | All | Yes | | checked | 指定当前是否选中 | Boolean | No | All | Yes | | disabled | 禁用 | Boolean | No | All | Yes | | onChange | change 事件触发的回调函数 | (e: { target: { checked: boolean } }) => void | No | All | Yes | @@ -1141,17 +1175,11 @@ export default class BasicTagExample extends React.Component { ## 遗留问题 -- [ ] PickerView 组件在 harmony 暂不支持，待ArkUI规格升级之后再重新适配 -- [ ] Input.TextArea 组件在 harmony 暂不支持，待ArkUI规格升级之后再重新适配 +- [ ] Drawer 组件暂时无法支持，与 Android/IOS 一致[issue#1352](https://github.com/ant-design/ant-design-mobile-rn/issues/1352)、[issue#1338](https://github.com/ant-design/ant-design-mobile-rn/issues/1338)。 +- [ ] Tooltip 组件气泡位置异常展示，与 Android/IOS 一致[issue#1376](https://github.com/ant-design/ant-design-mobile-rn/issues/1376)。 ## 其他 -- Drawer 组件暂时无法支持，与 Android/IOS 一致[issue#1352](https://github.com/ant-design/ant-design-mobile-rn/issues/1352)、[issue#1338](https://github.com/ant-design/ant-design-mobile-rn/issues/1338)。 -- Tooltip 组件气泡位置异常展示，与 Android/IOS 一致[issue#1376](https://github.com/ant-design/ant-design-mobile-rn/issues/1376)。 -- Radio 组件的 defaultCheck 属性无法正常生效，与 Android/IOS 一致[issue#1380](https://github.com/ant-design/ant-design-mobile-rn/issues/1380)。 -- Picker 组件的 defaultValue 属性无法正常生效，与 Android/IOS 一致[issue#1381](https://github.com/ant-design/ant-design-mobile-rn/issues/1381)。 - ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/ant-design/ant-design-mobile-rn/blob/master/LICENSE)，请自由地享受和参与开源。 - +本项目基于 [The MIT License (MIT)](https://github.com/ant-design/ant-design-mobile-rn/blob/master/LICENSE)，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-autocomplete-dropdown.md b/zh-cn/react-native-autocomplete-dropdown.md index 56a600c8d..361f1fefd 100644 --- a/zh-cn/react-native-autocomplete-dropdown.md +++ b/zh-cn/react-native-autocomplete-dropdown.md @@ -18,18 +18,31 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 4.0.0 | 0.72 | +| 4.3.1 | 0.77 | + #### npm ```bash -npm install react-native-autocomplete-dropdown@4.0.0-rc.5 +# V4.0.0 +npm install react-native-autocomplete-dropdown@4.0.0 + +# V4.3.1 +npm install react-native-autocomplete-dropdown@4.3.1 ``` #### yarn ```bash -yarn add react-native-autocomplete-dropdown@4.0.0-rc.5 +# V4.0.0 +yarn add react-native-autocomplete-dropdown@4.0.0 + +# V4.3.1 +yarn add react-native-autocomplete-dropdown@4.3.1 ``` @@ -92,9 +105,9 @@ export const LocalDataSetExample = memo(() => { ## Link -本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库 HarmonyOS 侧实现依赖react-native-svg 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 -如未引入请参照[@react-native-oh-tpl/react-native-svg 文档](/zh-cn/react-native-svg-capi.md)进行引入 +如未引入请参照[react-native-svg 文档](/zh-cn/react-native-svg-capi.md)进行引入 ## 约束与限制 @@ -103,6 +116,7 @@ export const LocalDataSetExample = memo(() => { 本文档内容基于以下版本验证通过： 1. RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## 属性 @@ -112,47 +126,49 @@ export const LocalDataSetExample = memo(() => { > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|-------------------------------|---------------------------------------------------------------------------------------------------------------|---------------------|----------|-------------|-------------------| -| dataSet | set of list items | array | no | iOS/Android | yes | -| initialValue | string (id) or object that contain id | object \| string | no | iOS/Android | yes | -| loading | loading state | boolean | no | iOS/Android | yes | -| useFilter | whether use local filter by dataSet (useful set to false for remote filtering to prevent rerender twice) | boolean | no | iOS/Android | yes | -| showClear | show clear button | boolean | no | iOS/Android | yes | -| showChevron | show chevron (open/close) button | boolean | no | iOS/Android | yes | -| closeOnSubmit | sets the max stroke line width | boolean | no | iOS/Android | yes | -| clearOnFocus | whether to clear typed text on focus | boolean | no | iOS/Android | yes | -| caseSensitive | whether to perform case-sensitive search | boolean | no | iOS/Android | yes | -| ignoreAccents | ignore diacritics | boolean | no | iOS/Android | yes | -| trimSearchText | trim the searched text | boolean | no | iOS/Android | yes | -| editable | is textInput editable | boolean | no | iOS/Android | yes | -| debounce | wait ms before call onChangeText | number | no | iOS/Android | yes | -| suggestionsListMaxHeight | max height of dropdown | number | no | iOS/Android | yes | -| direction | "up" or "down" | up \| down | no | iOS/Android | yes | -| matchFrom | whether match suggestions from start of titles or anywhere in the title. Possible values are "any" or "start" | any \| start | no | iOS/Android | yes | -| onChangeText | event textInput onChangeText | function | no | iOS/Android | yes | -| onSelectItem | event onSelectItem | function | no | iOS/Android | yes | -| onOpenSuggestionsList | event onOpenSuggestionsList | function | no | iOS/Android | yes | -| onChevronPress | event onChevronPress | function | no | iOS/Android | yes | -| onClear | event on clear button press | function | no | iOS/Android | yes | -| onSubmit | event on submit KB button press | function | no | iOS/Android | yes | -| onBlur | event fired on text input blur | function | no | iOS/Android | yes | -| onFocus | event on focus text input | function | no | iOS/Android | yes | -| renderItem | JSX for render item (item, searchText) => JSX | function | no | iOS/Android | yes | -| controller | return reference to module controller with methods close, open, toggle, clear, setInputText, setItem | function | no | iOS/Android | yes | -| containerStyle | containerStyle | ViewStyle | no | iOS/Android | yes | -| inputContainerStyle | custom input container style | ViewStyle | no | iOS/Android | yes | -| rightButtonsContainerStyle | rightButtonsContainerStyle | ViewStyle | no | iOS/Android | yes | -| suggestionsListContainerStyle | suggestionsListContainerStyle | ViewStyle | no | iOS/Android | yes | -| suggestionsListTextStyle | suggestionsListTextStyle | TextStyle | no | iOS/Android | yes | -| rightIconComponent | custom chevron icon | React.Component | no | iOS/Android | yes | -| ChevronIconComponent | Chevron Custom Icon | React.Component | no | iOS/Android | yes | -| ClearIconComponent | Clear Custom Icon | React.Component | no | iOS/Android | yes | -| EmptyResultComponent | replace the default `` Component on empty result | React.Component | no | iOS/Android | yes | -| InputComponent | input element component | React.ComponentType | no | iOS/Android | yes | -| emptyResultText | replace the default "Nothing found" text on empty result | string | no | iOS/Android | yes | -| textInputProps | text input props | TextInputProps | no | iOS/Android | yes | -| flatListProps | props for \ component | FlatListProps | no | iOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `dataSet` | 列表项的集合 | array | no | iOS/Android | yes | +| `initialValue` | 字符串（id）或包含 id 的对象 | object \| string | no | iOS/Android | yes | +| `loading` | 加载状态 | boolean | no | iOS/Android | yes | +| `useFilter` | 是否使用基于 dataSet 的本地过滤（对于远程过滤，设置为 false 很有用，以防止重复渲染） | boolean | no | iOS/Android | yes | +| `showClear` | 显示清除按钮 | boolean | no | iOS/Android | yes | +| `showChevron` | 显示箭头（展开/关闭）按钮 | boolean | no | iOS/Android | yes | +| `closeOnSubmit` | 设置最大描边线宽 | boolean | no | iOS/Android | yes | +| `clearOnFocus` | 聚焦时是否清除已输入的文本 | boolean | no | iOS/Android | yes | +| `caseSensitive` | 是否执行区分大小写的搜索 | boolean | no | iOS/Android | yes | +| `ignoreAccents` | 忽略变音符号 | boolean | no | iOS/Android | yes | +| `trimSearchText` | 去除搜索文本的首尾空格 | boolean | no | iOS/Android | yes | +| `editable` | textInput 是否可编辑 | boolean | no | iOS/Android | yes | +| `debounce` | 调用 onChangeText 前等待的毫秒数 | number | no | iOS/Android | yes | +| `suggestionsListMaxHeight` | 下拉列表的最大高度 | number | no | iOS/Android | yes | +| `direction` | "up"（向上）或 "down"（向下） | up \| down | no | iOS/Android | yes | +| `matchFrom` | 是从标题开头匹配建议，还是在标题任意位置匹配。可能的值为 "any" 或 "start" | any \| start | no | iOS/Android | yes | +| `onChangeText` | textInput 的 onChangeText 事件 | function | no | iOS/Android | yes | +| `onSelectItem` | onSelectItem 事件 | function | no | iOS/Android | yes | +| `onOpenSuggestionsList` | onOpenSuggestionsList 事件 | function | no | iOS/Android | yes | +| `onChevronPress` | onChevronPress 事件 | function | no | iOS/Android | yes | +| `onClear` | 清除按钮按下时的事件 | function | no | iOS/Android | yes | +| `onSubmit` | 键盘提交按钮按下时的事件 | function | no | iOS/Android | yes | +| `onBlur` | 文本输入失去焦点时触发的事件 | function | no | iOS/Android | yes | +| `onFocus` | 文本输入获得焦点时的事件 | function | no | iOS/Android | yes | +| `renderItem` | 用于渲染列表项的 JSX (item, searchText) => JSX | function | no | iOS/Android | yes | +| `controller` | 返回模块控制器的引用，包含方法 close, open, toggle, clear, setInputText, setItem | function | no | iOS/Android | yes | +| `containerStyle` | 容器样式 | ViewStyle | no | iOS/Android | yes | +| `inputContainerStyle` | 自定义输入框容器样式 | ViewStyle | no | iOS/Android | yes | +| `rightButtonsContainerStyle` | 右侧按钮容器样式 | ViewStyle | no | iOS/Android | yes | +| `suggestionsListContainerStyle` | 建议列表容器样式 | ViewStyle | no | iOS/Android | yes | +| `suggestionsListTextStyle` | 建议列表文本样式 | TextStyle | no | iOS/Android | yes | +| `rightIconComponent` | 自定义箭头图标 | React.Component | no | iOS/Android | yes | +| `ChevronIconComponent` | 自定义箭头图标 | React.Component | no | iOS/Android | yes | +| `ClearIconComponent` | 自定义清除图标 | React.Component | no | iOS/Android | yes | +| `EmptyResultComponent` | 替换结果为空时的默认组件 | React.Component | no | iOS/Android | yes | +| `InputComponent` | 输入元素组件 | React.ComponentType | no | iOS/Android | yes | +| `emptyResultText` | 替换结果为空时的默认文本 "Nothing found" | string | no | iOS/Android | yes | +| `textInputProps` | 文本输入属性 | TextInputProps | no | iOS/Android | yes | +| `flatListProps` | 传递给 `FlatList` 组件的属性 | FlatListProps | no | iOS/Android | yes | +| `caseSensitive`4.3.1+ | 是否执行区分大小写的搜索 | bool | no | iOS/Android | yes | +| `editable`4.3.1+ | textInput 是否可编辑 | bool | no | iOS/Android | yes | ## 遗留问题 diff --git a/zh-cn/react-native-blob-util.md b/zh-cn/react-native-blob-util.md index 5e2a83fb5..063dbd24d 100644 --- a/zh-cn/react-native-blob-util.md +++ b/zh-cn/react-native-blob-util.md @@ -24,7 +24,6 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-ohos/react-native-blob-util Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-blob-util/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -397,14 +396,15 @@ const styles = StyleSheet.create({ ``` ## 使用 Codegen - Version >= @react-native-ohos/react-native-blob-util@0.19.8，已适配codegen-lib生成桥接代码。 +> [!TIP] V0.19.6 需使用 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link -Version >= @react-native-ohos/react-native-blob-util@0.19.8，已支持 Autolink，无需手动配置，目前只支持72框架。 +Version >= @react-native-ohos/react-native-blob-util@0.19.8，已支持 Autolink，无需手动配置。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md Version <= @react-native-oh-tpl/react-native-blob-util@0.19.7@deprecated 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 @@ -435,6 +435,7 @@ Version <= @react-native-oh-tpl/react-native-blob-util@0.19.7@deprecated 暂不 打开 `entry/oh-package.json5`，添加以下依赖 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -455,11 +456,74 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 BlobUtilPackage +### 3.配置 CMakeLists 和引入 BlobUtilPackage + + +打开 `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: rnoh_blob_util +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-blob-util/src/main/cpp" ./blob-util) + +# RNOH_END: rnoh_blob_util + +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: rnoh_blob_util +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_blob_util) +# RNOH_END: rnoh_blob_util +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "BlobUtilPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4.在 ArkTs 侧引入 BlobUtilPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff + + import {BlobUtilPackage} from '@react-native-ohos/react-native-blob-util/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -469,7 +533,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -488,7 +552,11 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-ohos/react-native-blob-util Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-blob-util/releases) + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## API diff --git "a/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md" "b/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md" index 21ff84812..3dca559e2 100644 --- "a/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md" +++ "b/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md" @@ -16,7 +16,12 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases)，并下载适用版本的 tgz 包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.19.6 | [@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) | 0.72 | +| 0.22.2 | [@react-native-ohos/react-native-blob-util Releases]() | 0.77 | 进入到工程目录并输入以下命令： @@ -27,13 +32,21 @@ #### **npm** ```bash +# V0.19.6 npm install @react-native-oh-tpl/react-native-blob-util@file:# + +# V0.22.2 +npm install @react-native-ohos/react-native-blob-util@file:# ``` #### **yarn** ```bash +# V0.19.6 yarn add @react-native-oh-tpl/react-native-blob-util@file:# + +# V0.22.2 +yarn add @react-native-ohos/react-native-blob-util@file:# ``` @@ -420,6 +433,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V0.19.6 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -427,6 +442,15 @@ const styles = StyleSheet.create({ } ``` +- V0.22.2 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-blob-util": "file:../../node_modules/@react-native-ohos/react-native-blob-util/harmony/blobUtil.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -463,7 +487,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: rnoh_blob_util add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V0.19.6 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-blob-util/src/main/cpp" ./blob-util) + +# V0.22.2 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-blob-util/src/main/cpp" ./blob-util) + # RNOH_END: rnoh_blob_util file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -495,6 +525,9 @@ std::vector> PackageProvider::getPackages(Package::Cont return { std::make_shared(ctx), std::make_shared(ctx), +# V0.19.6 ++ std::make_shared(ctx), +# V0.22.2 + std::make_shared(ctx), }; } @@ -506,8 +539,12 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... +// V0.19.6 + import {BlobUtilPackage} from '@react-native-oh-tpl/react-native-blob-util/ts'; +// V0.22.2 ++ import {BlobUtilPackage} from '@react-native-ohos/react-native-blob-util/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -535,7 +572,17 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.19.6 | [@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) | 0.72 | +| 0.22.2 | [@react-native-ohos/react-native-blob-util Releases]() | 0.77 | + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## API @@ -645,5 +692,4 @@ ohpm install ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/RonRadtke/react-native-blob-util/blob/master/LICENSE) ，请自由地享受和参与开源。 - +本项目基于 [The MIT License (MIT)](https://github.com/RonRadtke/react-native-blob-util/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-chart-kit.md b/zh-cn/react-native-chart-kit.md index 6c2198ff7..b782d3d95 100644 --- a/zh-cn/react-native-chart-kit.md +++ b/zh-cn/react-native-chart-kit.md @@ -14,15 +14,18 @@

- - - > [!TIP] > > [Github 地址](https://github.com/indiespirit/react-native-chart-kit) ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 6.12.0 | 0.72/0.77 | + + + 进入到工程目录并输入以下命令： @@ -112,9 +115,9 @@ export default MyChart; ## Link -本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库 HarmonyOS 侧实现依赖@react-native-oh-library/react-native-svg 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 -如未引入请参照[@react-native-oh-tpl/react-native-svg文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg-capi.md#link)进行引入 +如未引入请参照[@react-native-oh-library/react-native-svg文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg-capi.md#link)进行引入 ## 约束与限制 @@ -123,6 +126,7 @@ export default MyChart; 本文档内容基于以下版本验证通过： 1. RNOH: 0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.300SP1; ROM：3.0.0.18; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## 属性 @@ -132,146 +136,144 @@ export default MyChart; ### Chart style -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------------------- | ------------------------------------------------------------ | ------------------ | -------- | -------- | ----------------- | -| `backgroundGradientFrom` | Defines the first color in the linear gradient of a chart's background | String | No | All | Yes | -| `backgroundGradientFromOpacity` | Defines the first color opacity in the linear gradient of a chart's background | Number | No | All | Yes | -| `backgroundGradientTo` | Defines the second color in the linear gradient of a chart's background | String | No | All | Yes | -| `backgroundGradientToOpacity` | Defines the second color opacity in the linear gradient of a chart's background | Number | No | All | Yes | -| `fillShadowGradientFrom` | Defines the first color in the linear gradient of the area under data | String | No | All | Yes | -| `fillShadowGradientFromOpacity` | Defines the first color opacity in the linear gradient of the area under data | Number | No | All | Yes | -| `fillShadowGradientFromOffset` | Defines the first color offset (0-1) in the linear gradient of the area under data | Number | No | All | Yes | -| `fillShadowGradientTo` | Defines the second color in the linear gradient of the area under data | String | No | All | Yes | -| `fillShadowGradientToOpacity` | Defines the second color opacity in the linear gradient of the area under data | Number | No | All | Yes | -| `fillShadowGradientToOffset` | Defines the second color offset (0-1) in the linear gradient of the area under data | Number | No | All | Yes | -| `useShadowColorFromDataset` | Defines the option to use color from dataset to each chart data. Default is false | Boolean | No | All | Yes | -| `color` | Defines the base color function that is used to calculate colors of labels and sectors used in a chart | Function => String | No | All | Yes | -| `strokeWidth` | Defines the base stroke width in a chart | Number | No | All | Yes | -| `barPercentage` | Defines the percent (0-1) of the available width each bar width in a chart | Number | No | All | Yes | -| `barRadius` | Defines the radius of each bar | Number | No | All | Yes | -| `propsForBackgroundLines` | Override styles of the background lines, refer to react-native-svg's Line documentation | Props | No | All | Yes | -| `propsForLabels` | Override styles of the labels, refer to react-native-svg's Text documentation | Props | No | All | Yes | -| `propsForVerticalLabels` | Override styles of vertical labels, refer to react-native-svg's Text documentation | Props | No | All | Yes | -| `propsForHorizontalLabels` | Override styles of horizontal labels, refer to react-native-svg's Text documentation | Props | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `backgroundGradientFrom` | 定义图表背景线性渐变的起始颜色 | String | No | All | Yes | +| `backgroundGradientFromOpacity` | 定义图表背景线性渐变起始颜色的不透明度 | Number | No | All | Yes | +| `backgroundGradientTo` | 定义图表背景线性渐变的结束颜色 | String | No | All | Yes | +| `backgroundGradientToOpacity` | 定义图表背景线性渐变结束颜色的不透明度 | Number | No | All | Yes | +| `fillShadowGradientFrom` | 定义数据下方区域线性渐变的起始颜色 | String | No | All | Yes | +| `fillShadowGradientFromOpacity` | 定义数据下方区域线性渐变起始颜色的不透明度 | Number | No | All | Yes | +| `fillShadowGradientFromOffset` | 定义数据下方区域线性渐变起始颜色的偏移量 (0-1) | Number | No | All | Yes | +| `fillShadowGradientTo` | 定义数据下方区域线性渐变的结束颜色 | String | No | All | Yes | +| `fillShadowGradientToOpacity` | 定义数据下方区域线性渐变结束颜色的不透明度 | Number | No | All | Yes | +| `fillShadowGradientToOffset` | 定义数据下方区域线性渐变结束颜色的偏移量 (0-1) | Number | No | All | Yes | +| `useShadowColorFromDataset` | 定义是否对每个图表数据使用数据集中的颜色的选项。默认为 false | Boolean | No | All | Yes | +| `color` | 定义用于计算图表中标签和扇区颜色的基础颜色函数 | Function => String | No | All | Yes | +| `strokeWidth` | 定义图表中的基础描边宽度 | Number | No | All | Yes | +| `barPercentage` | 定义图表中每个条形宽度占可用宽度的百分比 (0-1) | Number | No | All | Yes | +| `barRadius` | 定义每个条形的圆角半径 | Number | No | All | Yes | +| `propsForBackgroundLines` | 覆盖背景线的样式，参考 react-native-svg 的 Line 文档 | Props | No | All | Yes | +| `propsForLabels` | 覆盖标签的样式，参考 react-native-svg 的 Text 文档 | Props | No | All | Yes | +| `propsForVerticalLabels` | 覆盖垂直标签的样式，参考 react-native-svg 的 Text 文档 | Props | No | All | Yes | +| `propsForHorizontalLabels` | 覆盖水平标签的样式，参考 react-native-svg 的 Text 文档 | Props | No | All | Yes | ### Line Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------------------- | ------------------------------------------------------------ | ----------------------- | -------- | -------- | ----------------- | -| data | Data for the chart - see example above | Object | No | All | Yes | -| width | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive | Number | No | All | Yes | -| height | Height of the chart | Number | No | All | Yes | -| withDots | Show dots on the line - default: True | boolean | No | All | Yes | -| withShadow | Show shadow for line - default: True | boolean | No | All | Yes | -| withInnerLines | Show inner dashed lines - default: True | boolean | No | All | Yes | -| withOuterLines | Show outer dashed lines - default: True | boolean | No | All | Yes | -| withVerticalLines | Show vertical lines - default: True | boolean | No | All | Yes | -| withHorizontalLines | Show horizontal lines - default: True | boolean | No | All | Yes | -| withVerticalLabels | Show vertical labels - default: True | boolean | No | All | Yes | -| withHorizontalLabels | Show horizontal labels - default: True | boolean | No | All | Yes | -| fromZero | Render charts from 0 not from the minimum value. - default: False | boolean | No | All | Yes | -| yAxisLabel | Prepend text to horizontal labels -- default: '' | string | No | All | Yes | -| yAxisSuffix | Append text to horizontal labels -- default: '' | string | No | All | Yes | -| xAxisLabel | Prepend text to vertical labels -- default: '' | string | No | All | Yes | -| yAxisInterval | Display y axis line every {x} input. -- default: 1 | string | No | All | Yes | -| chartConfig | Configuration object for the chart, see example config object above | Object | No | All | Yes | -| decorator | This function takes a whole bunch of stuff and can render extra elements, such as data point info or additional markup. | Function | No | All | Yes | -| onDataPointClick | Callback that takes {value, dataset, getColor} | Function | No | All | Yes | -| horizontalLabelRotation | Rotation angle of the horizontal labels - default 0 | number (degree) | No | All | Yes | -| verticalLabelRotation | Rotation angle of the vertical labels - default 0 | number (degree) | No | All | Yes | -| getDotColor | Defines the dot color function that is used to calculate colors of dots in a line chart and takes (dataPoint, dataPointIndex) | function => string | No | All | Yes | -| renderDotContent | Render additional content for the dot. Takes ({x, y, index, indexData}) as arguments. | Function | No | All | Yes | -| yLabelsOffset | Offset for Y axis labels | number | No | All | Yes | -| xLabelsOffset | Offset for X axis labels | number | No | All | Yes | -| hidePointsAtIndex | Indices of the data points you don't want to display | number[] | No | All | Yes | -| formatYLabel | This function change the format of the display value of the Y label. Takes the Y value as argument and should return the desirable string. | Function | No | All | Yes | -| formatXLabel | This function change the format of the display value of the X label. Takes the X value as argument and should return the desirable string. | Function | No | All | Yes | -| getDotProps | This is an alternative to chartConfig's propsForDots | (value, index) => props | No | All | Yes | -| segments | The amount of horizontal lines - default 4 | number | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `data` | 图表数据 | Object | No | All | Yes | +| `width` | 图表的宽度，使用 'Dimensions' 库获取屏幕宽度以实现响应式布局 | Number | No | All | Yes | +| `height` | 图表的高度 | Number | No | All | Yes | +| `withDots` | 在折线上显示点 - 默认值：True | boolean | No | All | Yes | +| `withShadow` | 显示折线阴影 - 默认值：True | boolean | No | All | Yes | +| `withInnerLines` | 显示内部虚线 - 默认值：True | boolean | No | All | Yes | +| `withOuterLines` | 显示外部虚线 - 默认值：True | boolean | No | All | Yes | +| `withVerticalLines` | 显示垂直线 - 默认值：True | boolean | No | All | Yes | +| `withHorizontalLines` | 显示水平线 - 默认值：True | boolean | No | All | Yes | +| `withVerticalLabels` | 显示垂直标签 - 默认值：True | boolean | No | All | Yes | +| `withHorizontalLabels` | 显示水平标签 - 默认值：True | boolean | No | All | Yes | +| `fromZero` | 从 0 开始渲染图表，而不是从最小值开始 - 默认值：False | boolean | No | All | Yes | +| `yAxisLabel` | 在水平标签前添加文本 -- 默认值：'' | string | No | All | Yes | +| `yAxisSuffix` | 在水平标签后添加文本 -- 默认值：'' | string | No | All | Yes | +| `xAxisLabel` | 在垂直标签前添加文本 -- 默认值：'' | string | No | All | Yes | +| `yAxisInterval` | 每隔 {x} 个输入显示一条 Y 轴线 -- 默认值：1 | string | No | All | Yes | +| `chartConfig` | 图表的配置对象 | Object | No | All | Yes | +| `decorator` | 此函数接收大量参数，可用于渲染额外元素，例如数据点信息或其他标记。 | Function | No | All | Yes | +| `onDataPointClick` | 接收 {value, dataset, getColor} 的回调函数 | Function | No | All | Yes | +| `horizontalLabelRotation` | 水平标签的旋转角度 - 默认值 0 | number (degree) | No | All | Yes | +| `verticalLabelRotation` | 垂直标签的旋转角度 - 默认值 0 | number (degree) | No | All | Yes | +| `getDotColor` | 定义用于计算折线图中点颜色的函数，接收 (dataPoint, dataPointIndex) | function => string | No | All | Yes | +| `renderDotContent` | 为点渲染额外内容。接收 ({x, y, index, indexData}) 作为参数。 | Function | No | All | Yes | +| `yLabelsOffset` | Y 轴标签的偏移量 | number | No | All | Yes | +| `xLabelsOffset` | X 轴标签的偏移量 | number | No | All | Yes | +| `hidePointsAtIndex` | 你不想显示的数据点的索引 | number[] | No | All | Yes | +| `formatYLabel` | 此函数更改 Y 轴标签显示值的格式。接收 Y 值作为参数，并应返回所需的字符串。 | Function | No | All | Yes | +| `formatXLabel` | 此函数更改 X 轴标签显示值的格式。接收 X 值作为参数，并应返回所需的字符串。 | Function | No | All | Yes | +| `getDotProps` | 这是 chartConfig 中 propsForDots 的替代方案 | (value, index) => props | No | All | Yes | +| `segments` | 水平线的数量 - 默认值 4 | number | No | All | Yes | ### Bezier Line Chart -| | | | | | | -| ---- | -------------------------------------- | ------ | -------- | -------- | ----------------- | -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| bezier | Data for the chart - see example above | Object | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `bezier` | 使折线图平滑弯曲 | boolean | No | All | Yes | ### Progress Ring -| Property | Type | Description | Required | Platform | HarmonyOS Support | -| ----------- | ------- | ------------------------------------------------------------ | -------- | -------- | ----------------- | -| data | Object | Data for the chart - see example above | No | ALL | YES | -| width | Number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive | No | ALL | YES | -| height | Number | Height of the chart | No | ALL | YES | -| strokeWidth | Number | Width of the stroke of the chart - default: 16 | No | ALL | YES | -| radius | Number | Inner radius of the chart - default: 32 | No | ALL | YES | -| chartConfig | Object | Configuration object for the chart, see example config in the beginning of this file | No | ALL | YES | -| hideLegend | Boolean | Switch to hide chart legend (defaults to false) | No | ALL | YES | +| Property | Type | Description | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `data` | Object | 图表数据 | No | ALL | YES | +| `width` | Number | 图表的宽度，使用 'Dimensions' 库获取屏幕宽度以实现响应式布局 | No | ALL | YES | +| `height` | Number | 图表的高度 | No | ALL | YES | +| `strokeWidth` | Number | 图表的描边宽度 - 默认值：16 | No | ALL | YES | +| `radius` | Number | 图表的内半径 - 默认值：32 | No | ALL | YES | +| `chartConfig` | Object | 图表的配置对象 | No | ALL | YES | +| `hideLegend` | Boolean | 隐藏图表图例的开关（默认为 false） | No | ALL | YES | ### Bar chart -| Property | Type | Description | Required | Platform | HarmonyOS Support | -| ----------------------- | ------- | ------------------------------------------------------------ | -------- | -------- | ----------------- | -| data | Object | Data for the chart - see example above | No | ALL | YES | -| width | Number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive | No | ALL | YES | -| height | Number | Height of the chart | No | ALL | YES | -| withVerticalLabels | boolean | Show vertical labels - default: True | No | ALL | YES | -| withHorizontalLabels | boolean | Show horizontal labels - default: True | No | ALL | YES | -| fromZero | boolean | Render charts from 0 not from the minimum value. - default: False | No | ALL | YES | -| withInnerLines | boolean | Show inner dashed lines - default: True | No | ALL | YES | -| yAxisLabel | string | Prepend text to horizontal labels -- default: '' | No | ALL | YES | -| yAxisSuffix | string | Append text to horizontal labels -- default: '' | No | ALL | YES | -| chartConfig | Object | Configuration object for the chart, see example config in the beginning of this file | No | ALL | YES | -| horizontalLabelRotation | number | Rotation angle of the horizontal labels - default 0 | No | ALL | YES | -| verticalLabelRotation | number | Rotation angle of the vertical labels - default 0 | No | ALL | YES | -| showBarTops | boolean | Show bar tops | No | ALL | YES | -| showValuesOnTopOfBars | boolean | Show value above bars | No | ALL | YES | +| Property | Type | Description | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `data` | Object | 图表数据 | No | ALL | YES | +| `width` | Number | 图表的宽度，使用 'Dimensions' 库获取屏幕宽度以实现响应式布局 | No | ALL | YES | +| `height` | Number | 图表的高度 | No | ALL | YES | +| `withVerticalLabels` | boolean | 显示垂直标签 - 默认值：True | No | ALL | YES | +| `withHorizontalLabels` | boolean | 显示水平标签 - 默认值：True | No | ALL | YES | +| `fromZero` | boolean | 从 0 开始渲染图表，而不是从最小值开始 - 默认值：False | No | ALL | YES | +| `withInnerLines` | boolean | 显示内部虚线 - 默认值：True | No | ALL | YES | +| `yAxisLabel` | string | 在水平标签前添加文本 -- 默认值：'' | No | ALL | YES | +| `yAxisSuffix` | string | 在水平标签后添加文本 -- 默认值：'' | No | ALL | YES | +| `chartConfig` | Object | 图表的配置对象 | No | ALL | YES | +| `horizontalLabelRotation` | number | 水平标签的旋转角度 - 默认值 0 | No | ALL | YES | +| `verticalLabelRotation` | number | 垂直标签的旋转角度 - 默认值 0 | No | ALL | YES | +| `showBarTops` | boolean | 显示柱顶 | No | ALL | YES | +| `showValuesOnTopOfBars` | boolean | 在柱子上方显示数值 | No | ALL | YES | ### StackedBar chart -| Property | Type | Description | Required | Platform | HarmonyOS Support | -| -------------------- | ------- | ------------------------------------------------------------ | -------- | -------- | ----------------- | -| data | Object | Data for the chart - see example above | No | ALL | YES | -| width | Number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive | No | ALL | YES | -| height | Number | Height of the chart | No | ALL | YES | -| withVerticalLabels | boolean | Show vertical labels - default: True | No | ALL | YES | -| withHorizontalLabels | boolean | Show horizontal labels - default: True | No | ALL | YES | -| chartConfig | Object | Configuration object for the chart, see example config in the beginning of this file | No | ALL | YES | -| barPercentage | Number | Defines the percent (0-1) of the available width each bar width in a chart | No | ALL | YES | -| hideLegend | boolean | Show legend - default: True | No | ALL | YES | +| Property | Type | Description | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `data` | Object | 图表数据 | No | ALL | YES | +| `width` | Number | 图表的宽度，使用 'Dimensions' 库获取屏幕宽度以实现响应式布局 | No | ALL | YES | +| `height` | Number | 图表的高度 | No | ALL | YES | +| `withVerticalLabels` | boolean | 显示垂直标签 - 默认值：True | No | ALL | YES | +| `withHorizontalLabels` | boolean | 显示水平标签 - 默认值：True | No | ALL | YES | +| `chartConfig` | Object | 图表的配置对象 | No | ALL | YES | +| `barPercentage` | Number | 定义图表中每个条形宽度占可用宽度的百分比 (0-1) | No | ALL | YES | +| `hideLegend` | boolean | 显示图例 - 默认值：True | No | ALL | YES | ### Pie chart -| Property | Type | Description | Required | Platform | HarmonyOS Support | -| -------------- | ------- | ------------------------------------------------------------ | -------- | -------- | ----------------- | -| data | Object | Data for the chart - see example above | No | ALL | YES | -| width | Number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive | No | ALL | YES | -| height | Number | Height of the chart | No | ALL | YES | -| chartConfig | Object | Configuration object for the chart, see example config in the beginning of this file | No | ALL | YES | -| accessor | string | Property in the data object from which the number values are taken | No | ALL | YES | -| bgColor | string | Background color - if you want to set transparent, input transparent or none. | No | ALL | YES | -| paddingLeft | string | Left padding of the pie chart | No | ALL | YES | -| center | array | Offset x and y coordinates to position the chart | No | ALL | YES | -| absolute | boolean | Shows the values as absolute numbers | No | ALL | YES | -| hasLegend | boolean | Defaults to true, set it to false to remove the legend | No | ALL | YES | -| avoidFalseZero | boolean | Defaults to false, set it to true to display a "<1%" instead of a rounded value equal to "0%" | No | ALL | YES | - +| Property | Type | Description | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `data` | Object | 图表数据 | No | ALL | YES | +| `width` | Number | 图表的宽度，使用 'Dimensions' 库获取屏幕宽度以实现响应式布局 | No | ALL | YES | +| `height` | Number | 图表的高度 | No | ALL | YES | +| `chartConfig` | Object | 图表的配置对象 | No | ALL | YES | +| `accessor` | string | 数据对象中用于提取数值的属性 | No | ALL | YES | +| `bgColor` | string | 背景颜色 - 如果想要设置为透明，请输入 transparent 或 none。 | No | ALL | YES | +| `paddingLeft` | string | 饼图的左边距 | No | ALL | YES | +| `center` | array | 用于定位图表的 x 和 y 坐标偏移量 | No | ALL | YES | +| `absolute` | boolean | 以绝对数值显示值 | No | ALL | YES | +| `hasLegend` | boolean | 默认为 true，设置为 false 可移除图例 | No | ALL | YES | +| `avoidFalseZero` | boolean | 默认为 false，设置为 true 可显示 “<1%” 而不是四舍五入等于 “0%” 的值 | No | ALL | YES | ### Contribution graph (heatmap) -| Property | Type | Description | Required | Platform | HarmonyOS Support | -| ------------------ | -------- | ------------------------------------------------------------ | -------- | -------- | ----------------- | -| data | Object | Data for the chart - see example above | No | ALL | YES | -| width | Number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive | No | ALL | YES | -| height | Number | Height of the chart | No | ALL | YES | -| gutterSize | Number | Size of the gutters between the squares in the chart | No | ALL | YES | -| squareSize | Number | Size of the squares in the chart | No | ALL | YES | -| horizontal | boolean | Should graph be laid out horizontally? Defaults to true | No | ALL | YES | -| showMonthLabels | boolean | Should graph include labels for the months? Defaults to true | No | ALL | YES | -| showOutOfRangeDays | boolean | Should graph be filled with squares, including days outside the range? Defaults to false | No | ALL | YES | -| chartConfig | Object | Configuration object for the chart, see example config in the beginning of this file | No | ALL | YES | -| accessor | string | Property in the data object from which the number values are taken; defaults to count | No | ALL | YES | -| getMonthLabel | function | Function which returns the label for each month, taking month index (0 - 11) as argument | No | ALL | YES | -| onDayPress | function | Callback invoked when the user clicks a day square on the chart; takes a value-item object | No | ALL | YES | +| Property | Type | Description | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `data` | Object | 图表数据 | No | ALL | YES | +| `width` | Number | 图表的宽度，使用 'Dimensions' 库获取屏幕宽度以实现响应式布局 | No | ALL | YES | +| `height` | Number | 图表的高度 | No | ALL | YES | +| `gutterSize` | Number | 图表中方块之间的间隙大小 | No | ALL | YES | +| `squareSize` | Number | 图表中方块的大小 | No | ALL | YES | +| `horizontal` | boolean | 图表是否应水平布局？默认为 true | No | ALL | YES | +| `showMonthLabels` | boolean | 图表是否应包含月份标签？默认为 true | No | ALL | YES | +| `showOutOfRangeDays` | boolean | 图表是否应填充方块，包括范围之外的日期？默认为 false | No | ALL | YES | +| `chartConfig` | Object | 图表的配置对象 | No | ALL | YES | +| `accessor` | string | 数据对象中用于提取数值的属性；默认为 count | No | ALL | YES | +| `getMonthLabel` | function | 返回每个月标签的函数，接收月份索引 (0 - 11) 作为参数 | No | ALL | YES | +| `onDayPress` | function | 当用户点击图表上的日期方块时调用的回调；接收一个 value-item 对象 | No | ALL | YES | ## 其他 diff --git a/zh-cn/react-native-community-blur.md b/zh-cn/react-native-community-blur.md index 04ffb79c2..344442735 100644 --- a/zh-cn/react-native-community-blur.md +++ b/zh-cn/react-native-community-blur.md @@ -18,7 +18,14 @@ 本库已经适配`C-API版本`从版本`4.4.0-0.1.0`开始的版本为`C-API版本`，`C-API版本`在性能和速度上都优于`ArkTS版本`。 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-community-blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.4.0 | [@react-native-oh-tpl/react-native-community-blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) | 0.72 | +| 4.5.0 | [@react-native-ohos/react-native-community-blur Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -27,13 +34,21 @@ #### **npm** ```bash +# V4.4.0 npm install @react-native-oh-tpl/blur + +# V4.5.0 +npm install @react-native-ohos/blur ``` #### **yarn** ```bash +# V4.4.0 yarn add @react-native-oh-tpl/blur + +# V4.5.0 +yarn add @react-native-ohos/blur ``` @@ -229,6 +244,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V4.4.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -237,6 +254,16 @@ const styles = StyleSheet.create({ } ``` +- V4.5.0 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-ohos/blur": "file:../../node_modules/@react-native-ohos/blur/harmony/blur.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -265,7 +292,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: add_package_subdirectories add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V4.4.0 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/blur/src/main/cpp" ./blur) + +# V4.5.0 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/blur/src/main/cpp" ./blur) + # RNOH_END: add_package_subdirectories add_library(rnoh_app SHARED @@ -354,7 +387,19 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-community-blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.4.0 | [@react-native-oh-tpl/react-native-community-blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) | 0.72 | +| 4.5.0 | [@react-native-ohos/react-native-community-blur Releases]() | 0.77 | + + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; + ## 属性 @@ -362,42 +407,42 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------------------------------- | ----------------------------------------------------------------------------------------- | --------- |----------| ------- | ----------------- | -| `blurType` | blur type | enum | yes | iOS,Android | yes | -| `blurAmount?` | 0 - 100 (The maximum blurAmount on Android is 32, so higher values will be clamped to 32) | number | no | iOS,Android | yes | -| `reducedTransparencyFallbackColor?` | Reduce transparency fallback color | Any color | no | iOS | no | -| `blurRadius?` | Matches iOS blurAmount | number | no | Android | no | -| `downsampleFactor?` | Matches iOS blurAmount | number | no | Android | no | -| `overlayColor?` | Default color based on iOS blurType | Any color | no | Android | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `blurType` | 模糊类型 | enum | yes | iOS,Android | yes | +| `blurAmount?` | 0 - 100（Android 上的最大 blurAmount 为 32，因此更高的值将被限制为 32） | number | no | iOS,Android | yes | +| `reducedTransparencyFallbackColor?` | 降低透明度时的回退颜色 | Any color | no | iOS | no | +| `blurRadius?` | 匹配 iOS 的 blurAmount | number | no | Android | no | +| `downsampleFactor?` | 匹配 iOS 的 blurAmount | number | no | Android | no | +| `overlayColor?` | 基于 iOS blurType 的默认颜色 | Any color | no | Android | no | #### blurType > [!TIP] 如果要使用自适应模糊效果需要配置深色模式[配置文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-dark-light-color-adaptation)如果不配置深色模式则自适应模糊效果将没有深色模式，只有浅色模式。 -| Name | Description | Platform | HarmonyOS Support | -| ------------------------ | ------------------------------------------------------------------------------------------------------ |-----------------------| ----------------- | -| `xlight` | extra light blur type | iOS,Android | yes | -| `light` | light blur type | iOS,Android | yes | -| `dark` | dark blur type | iOS,Android | yes | -| `extraDark` | extra dark blur type (tvOS only) | iOS | yes | -| `regular` | regular blur type (iOS 10+ and tvOS only) | iOS | yes | -| `prominent` | prominent blur type (iOS 10+ and tvOS only) | iOS | yes | -| `chromeMaterial` | An adaptable blur effect that creates the appearance of a material with normal thickness | iOS 13 only | yes | -| `material` | An adaptable blur effect that creates the appearance of a material with normal thickness | iOS 13 only | yes | -| `thickMaterial` | An adaptable blur effect that creates the appearance of a material that is thicker than normal | iOS 13 only | yes | -| `thinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material | iOS 13 only | yes | -| `ultraThinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material | iOS 13 only | yes | -| `chromeMaterialDark` | A blur effect that creates the appearance of an ultra-thin material and is always dark | iOS 13 only | yes | -| `materialDark` | A blur effect that creates the appearance of a thin material and is always dark | iOS 13 only | yes | -| `thickMaterialDark` | A blur effect that creates the appearance of a material with normal thickness and is always dark | iOS 13 only | yes | -| `thinMaterialDark` | A blur effect that creates the appearance of a material that is thicker than normal and is always dark | iOS 13 only | yes | -| `ultraThinMaterialDark` | A blur effect that creates the appearance of the system chrome and is always dark | iOS 13 only | yes | -| `chromeMaterialLight` | An adaptable blur effect that creates the appearance of the system chrome | iOS 13 only | yes | -| `materialLight` | An adaptable blur effect that creates the appearance of a material with normal thickness | iOS 13 only | yes | -| `thickMaterialLight` | An adaptable blur effect that creates the appearance of a thin material | iOS 13 only | yes | -| `thinMaterialLight` | An adaptable blur effect that creates the appearance of a thin material | iOS 13 only | yes | -| `ultraThinMaterialLight` | An adaptable blur effect that creates the appearance of an ultra-thin material | iOS 13 only | yes | +| Name | Description | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | +| `xlight` | 超亮模糊类型 | iOS,Android | yes | +| `light` | 亮色模糊类型 | iOS,Android | yes | +| `dark` | 暗色模糊类型 | iOS,Android | yes | +| `extraDark` | 超暗模糊类型（仅限 tvOS） | iOS | yes | +| `regular` | 常规模糊类型（仅限 iOS 10+ 和 tvOS） | iOS | yes | +| `prominent` | 显著模糊类型（仅限 iOS 10+ 和 tvOS） | iOS | yes | +| `chromeMaterial` | 一种自适应模糊效果，营造出正常厚度材质的外观 | iOS 13 only | yes | +| `material` | 一种自适应模糊效果，营造出正常厚度材质的外观 | iOS 13 only | yes | +| `thickMaterial` | 一种自适应模糊效果，营造出比正常材质更厚的材质外观 | iOS 13 only | yes | +| `thinMaterial` | 一种自适应模糊效果，营造出超薄材质的外观 | iOS 13 only | yes | +| `ultraThinMaterial` | 一种自适应模糊效果，营造出超薄材质的外观 | iOS 13 only | yes | +| `chromeMaterialDark` | 一种模糊效果，营造出超薄材质的外观，且始终为暗色 | iOS 13 only | yes | +| `materialDark` | 一种模糊效果，营造出薄材质的外观，且始终为暗色 | iOS 13 only | yes | +| `thickMaterialDark` | 一种模糊效果，营造出正常厚度材质的外观，且始终为暗色 | iOS 13 only | yes | +| `thinMaterialDark` | 一种模糊效果，营造出比正常材质更厚的材质外观，且始终为暗色 | iOS 13 only | yes | +| `ultraThinMaterialDark` | 一种模糊效果，营造出系统镶边（System Chrome）的外观，且始终为暗色 | iOS 13 only | yes | +| `chromeMaterialLight` | 一种自适应模糊效果，营造出系统镶边（System Chrome）的外观 | iOS 13 only | yes | +| `materialLight` | 一种自适应模糊效果，营造出正常厚度材质的外观 | iOS 13 only | yes | +| `thickMaterialLight` | 一种自适应模糊效果，营造出薄材质的外观 | iOS 13 only | yes | +| `thinMaterialLight` | 一种自适应模糊效果，营造出薄材质的外观 | iOS 13 only | yes | +| `ultraThinMaterialLight` | 一种自适应模糊效果，营造出超薄材质的外观 | iOS 13 only | yes | ## API @@ -406,10 +451,10 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该组件；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------- | ------------------------------------------------------------------------------------------ | ---|------ |----------| ----------------- | -| `BlurView` | Preload images to display later. e.g. | component|no | iOS,Android | yes | -| `VibrancyView` | The vibrancy effect lets the content underneath a blurred view show through more vibrantly | component|no | iOS | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `BlurView` | 预加载图像以便稍后显示。 | component | no | iOS,Android | yes | +| `VibrancyView` | Vibrancy 效果让模糊视图下方的内容更加生动地透显出来 | component | no | iOS | no | ## 遗留问题 diff --git a/zh-cn/react-native-community-datetimepicker.md b/zh-cn/react-native-community-datetimepicker.md index 08420df48..f334640a0 100644 --- a/zh-cn/react-native-community-datetimepicker.md +++ b/zh-cn/react-native-community-datetimepicker.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/datetimepicker Releases](https://github.com/react-native-oh-library/datetimepicker/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 7.6.2 | [@react-native-oh-tpl/datetimepicker Releases](https://github.com/react-native-oh-library/datetimepicker/releases) | 0.72 | +| 8.4.3 | [@react-native-ohos/datetimepicker Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -25,13 +32,21 @@ #### **npm** ```bash +# V7.6.2 npm install @react-native-oh-tpl/datetimepicker + +# V8.4.3 +npm install @react-native-ohos/datetimepicker ``` #### **yarn** ```bash +# V7.6.2 yarn add @react-native-oh-tpl/datetimepicker + +# V8.4.3 +yarn add @react-native-ohos/datetimepicker ``` @@ -99,8 +114,6 @@ export const MDatetimepicker = () => { ### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 - - ```json { ... @@ -123,6 +136,8 @@ export const MDatetimepicker = () => { 打开 `entry/oh-package.json5`，添加以下依赖 +- V7.6.2 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -131,6 +146,16 @@ export const MDatetimepicker = () => { } ``` +- V8.4.3 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-ohos/datetimepicker": "file:../../node_modules/@react-native-ohos/datetimepicker/harmony/datetimepicker.har" +} +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -166,7 +191,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V7.6.2 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/datetimepicker/src/main/cpp" ./datetimepicker) + +# V8.4.3 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/datetimepicker/src/main/cpp" ./datetimepicker) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -209,8 +240,12 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... +// V7.6.2 + import { RNDateTimePicker, DATETIME_PICKER_VIEW_TYPE } from "@react-native-oh-tpl/datetimepicker" +// V8.4.3 ++ import { RNDateTimePicker, DATETIME_PICKER_VIEW_TYPE } from "@react-native-ohos/datetimepicker" + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -226,7 +261,7 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ``` > [!TIP] 本库使用了混合方案，需要添加组件名。（如使用混合方案） - + 在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名 ```diff @@ -256,7 +291,18 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/datetimepicker Releases](https://github.com/react-native-oh-library/datetimepicker/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 7.6.2 | [@react-native-oh-tpl/datetimepicker Releases](https://github.com/react-native-oh-library/datetimepicker/releases) | 0.72 | +| 8.4.3 | [@react-native-ohos/datetimepicker Releases]() | 0.77 | + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; + ## 属性 @@ -266,34 +312,38 @@ ohpm install 详情请查看[datetimepicker 官方文档](https://github.com/react-native-datetimepicker/datetimepicker) -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------- | -------------------------------------------------------- | -------- | -------- | ------------------------ | ------------------------------------------------- | -| mode | Defines the type of the picker | string | 否 | All | partially (仅支持 date/time 模式) | -| style | Sets style directly on picker component. | object | 否 | IOS only | yes | -| display | Defines the visual display of the picker. The default value is "default". | string | 否 | All | partially (支持"default"，
"spinner"，"compact"，"inline") | -| onChange | Date change handler. | function | 否 | All | partially (仅支持 type 为 set 类型) | -| value | Defines the date or time value used in the component. | Date | 是 | All | partially (仅 mode=date 且
display=spinner 时支持动态设置) | -| is24Hour | Allows changing of the time picker to a 24-hour format. | bool | 否 | Windows and Android only | yes | -| maximumDate | Defines the maximum date that can be selected | Date | 否 | All | partially (仅支持在 mode=date 且
display=spinner 时设置) | -| minimumDate | Defines the minimum date that can be selected. | Date | 否 | All | partially (仅支持在 mode=date 且
display=spinner 时设置) | -| disabled | If true, the user won't be able to interact with the view. | bool | 否 | IOS only | yes | -| textColor | Allows changing of the textColor of the date picker. | string | 否 | IOS only | partially (仅支持在 mode=date 且
display=compact 时设置) | -| timeZoneName | Allows changing of the time zone of the date picker. By default,
it uses the device's time zone.
Use the time zone name from the IANA (TZDB) database name in https://en.wikipedia.org/wiki/List_of_tz_database_time_zones. | string | 否 | iOS and Android only | No | -| timeZoneOffsetInMinutes | Allows changing of the time zone of the date picker.
By default, it uses the device's time zone.
We strongly recommend using timeZoneName prop instead;
this prop has known issues in the android implementation (eg. #528). | number | 否 | iOS and Android only | No | -| timeZoneOffsetInSeconds | Allows changing of the time zone of the date picker.
By default, it uses the device's time zone. | number | 否 | Windows only | No | -| dayOfWeekFormat | Sets the display format for the day of the week headers.
Reference: https://docs.microsoft.com/en-us/uwp/api/windows.
ui.xaml.controls.calendarview.dayofweekformat?view=winrt-18362#remarks | string | 否 | Windows only | No | -| dateFormat | Sets the display format for the date value in the picker's
text box. Reference: https://docs.microsoft.com/en-us/uwp/api/windows.globalization.datetimeformatting.datetimeformatter?view=winrt-18362#examples | string | 否 | Windows only | No | -| firstDayOfWeek | Indicates which day is shown as the first day of the week. | number | 否 | Android and Windows only | No | -| accentColor | Allows changing the accentColor (tintColor) of the date picker.
Has no effect when display is "spinner". | string | 否 | iOS only | No | -| themeVariant | Allows overriding system theme variant (dark or light mode)
used by the date picker. However,
we recommend that you instead control the theme of the whole application using react-native-theme-control. | string | 否 | iOS only | No | -| locale | Allows changing the locale of the component.
This affects the displayed text and the date / time formatting.
By default, the device's locale is used.
Please note using this prop is discouraged due to not working
reliably in all picker modes. Prefer localization as documented in Localization note. | string | 否 | iOS only | No | -| positiveButton | Set the positive button label and text color. | Object | 否 | Android only | No | -| neutralButton | Allows displaying neutral button on picker dialog.
Pressing button can be observed in onChange handler
as event.type === 'neutralButtonPressed' | Object | 否 | Android only | No | -| negativeButton | Set the negative button label and text color. | Object | 否 | Android only | No | -| minuteInterval | The interval at which minutes can be selected.
Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30On
Windows, this can be any number between 0-59. | number | 否 | All | No | -| testID | Usually used by app automation frameworks.
Fully supported on iOS.
On Android, only supported for mode="date". | string | 否 | All | Yes | -| ViewProps | On iOS, you can pass any View props to the component.
Given that the underlying component is a native view,
not all of them are guaranteed to be supported,
but testID and onLayout are known to work. | Object | 否 | iOS only | No | -| onError | Callback that is called when an error occurs inside
the date picker native code (such as null activity). | function | 否 | Android only | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `mode` | 定义选择器的类型 | string | 否 | All | partially (仅支持 date/time 模式) | +| `style` | 直接设置选择器组件的样式。 | object | 否 | IOS only | yes | +| `display` | 定义选择器的视觉显示方式。默认值为 "default"。 | string | 否 | All | partially (支持"default"，
"spinner"，"compact"，"inline") | +| `design` | 定义选择器是否应使用 Material 3 组件或默认选择器。默认值为 "default"。 | string | 否 | Android only | No | +| `initialInputMode` | 仅当 design 为 "material" 时生效。允许设置选择器的初始输入模式。 | string | 否 | Android only | No | +| `title` | 仅当 design 为 "material" 时生效。允许设置选择器对话框的标题。 | string | 否 | Android only | No | +| `fullscreen` | 仅当 design 为 "material" 时生效。允许设置日期选择器对话框全屏显示。 | bool | 否 | Android only | No | +| `onChange` | 日期变更处理程序。 | function | 否 | All | partially (仅支持 type 为 set 类型) | +| `value` | 定义组件中使用的日期或时间值。 | Date | 是 | All | partially (仅 mode=date 且
display=spinner 时支持动态设置) | +| `is24Hour` | 允许将时间选择器更改为 24 小时制格式。 | bool | 否 | Windows and Android only | yes | +| `maximumDate` | 定义可选择的最大日期。 | Date | 否 | All | partially (仅支持在 mode=date 且
display=spinner 时设置) | +| `minimumDate` | 定义可选择的最小日期。 | Date | 否 | All | partially (仅支持在 mode=date 且
display=spinner 时设置) | +| `disabled` | 如果为 true，用户将无法与该视图交互。 | bool | 否 | IOS only | yes | +| `textColor` | 允许更改日期选择器的文本颜色。 | string | 否 | IOS only | partially (仅支持在 mode=date 且
display=compact 时设置) | +| `timeZoneName` | 允许更改日期选择器的时区。默认情况下，使用设备的时区。
使用来自 https://en.wikipedia.org/wiki/List_of_tz_database_time_zones 的 IANA (TZDB) 数据库名称中的时区名称。 | string | 否 | iOS and Android only | No | +| `timeZoneOffsetInMinutes` | 允许更改日期选择器的时区。
默认情况下，使用设备的时区。
我们强烈建议改用 timeZoneName 属性；
此属性在 Android 实现中存在已知问题（例如 #528）。 | number | 否 | iOS and Android only | No | +| `timeZoneOffsetInSeconds` | 允许更改日期选择器的时区。
默认情况下，使用设备的时区。 | number | 否 | Windows only | No | +| `dayOfWeekFormat` | 设置星期标题的显示格式。
参考：https://docs.microsoft.com/en-us/uwp/api/windows.
ui.xaml.controls.calendarview.dayofweekformat?view=winrt-18362#remarks | string | 否 | Windows only | No | +| `dateFormat` | 设置选择器文本框中日期值的显示格式。
参考：https://docs.microsoft.com/en-us/uwp/api/windows.globalization.datetimeformatting.datetimeformatter?view=winrt-18362#examples | string | 否 | Windows only | No | +| `firstDayOfWeek` | 指定哪一天显示为一周的第一天。 | number | 否 | Android and Windows only | No | +| `accentColor` | 允许更改日期选择器的强调色（tintColor）。
当 display 为 "spinner" 时无效。 | string | 否 | iOS only | No | +| `themeVariant` | 允许覆盖日期选择器使用的系统主题变体（深色或浅色模式）。
但是，我们建议您使用 react-native-theme-control 来控制整个应用程序的主题。 | string | 否 | iOS only | No | +| `locale` | 允许更改组件的区域设置（locale）。
这会影响显示的文本和日期/时间格式。
默认情况下，使用设备的区域设置。
请注意，不建议使用此属性，因为它在所有选择器模式下工作均不可靠。建议按照“本地化说明”中的记录进行本地化。 | string | 否 | iOS only | No | +| `positiveButton` | 设置确认按钮（positive button）的标签和文本颜色。 | Object | 否 | Android only | No | +| `neutralButton` | 允许在选择器对话框上显示中性按钮。
按下按钮可以在 onChange 处理程序中通过 event.type === 'neutralButtonPressed' 观察到。 | Object | 否 | Android only | No | +| `negativeButton` | 设置取消按钮（negative button）的标签和文本颜色。 | Object | 否 | Android only | No | +| `minuteInterval` | 可选分钟的时间间隔。
可能的值为：1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30。
在 Windows 上，这可以是 0-59 之间的任意数字。 | number | 否 | All | No | +| `testID` | 通常由应用自动化框架使用。
在 iOS 上完全支持。
在 Android 上，仅在 mode="date" 时支持。 | string | 否 | All | Yes | +| `ViewProps` | 在 iOS 上，您可以将任何 View 属性传递给组件。
鉴于底层组件是原生视图，
不能保证支持所有属性，
但 testID 和 onLayout 是有效的。 | Object | 否 | iOS only | No | +| `onError` | 当日期选择器原生代码内部发生错误（如 activity 为空）时调用的回调。 | function | 否 | Android only | No | ## 遗留问题 @@ -305,4 +355,4 @@ ohpm install ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-datetimepicker/datetimepicker/blob/master/LICENSE.md) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/react-native-datetimepicker/datetimepicker/blob/master/LICENSE.md) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-copilot.md b/zh-cn/react-native-copilot.md index 9d088a2be..8bdd7ac9a 100644 --- a/zh-cn/react-native-copilot.md +++ b/zh-cn/react-native-copilot.md @@ -17,6 +17,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 3.3.2 | 0.72 | +| 3.3.3 | 0.77 | + 进入到工程目录并输入以下命令： @@ -24,13 +29,21 @@ #### **npm** ```bash +# V3.3.2 npm install --save react-native-copilot@3.3.2 + +# V3.3.3 +npm install --save react-native-copilot@3.3.3 ``` #### **yarn** ```bash +# V3.3.2 yarn add react-native-copilot@3.3.2 + +# V3.3.3 +yarn add react-native-copilot@3.3.3 ``` @@ -216,9 +229,9 @@ const styles = StyleSheet.create({ ## Link -本库在 HarmonyOS NEXT 侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在 HarmonyOS NEXT 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库在 HarmonyOS NEXT 侧实现依赖react-native-svg 的原生端代码，如已在 HarmonyOS NEXT 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 -如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg-capi.md#link)进行引入 +如未引入请参照[react-native-svg 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg-capi.md#link)进行引入 ## 约束与限制 @@ -228,6 +241,7 @@ const styles = StyleSheet.create({ 1. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; ## 属性 @@ -237,15 +251,15 @@ const styles = StyleSheet.create({ > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------- | --------------------------------- | ------------ | -------- | ----------- | ----------------- | -| CopilotProps | Prompt Style Properties | CopilotProps | no | Android/iOS | partially | -| TooltipProps | Prompt Tool Properties | TooltipProps | no | Android/iOS | yes | -| CopilotProvider | Custom Tooltip Styles | function | no | Android/iOS | yes | -| CopilotStep | Customizing Component Step Styles | function | no | Android/iOS | yes | -| DefaultUI | Default UI Attributes | object | no | Android/iOS | yes | -| useCopilot | Use Prompt Style | function | no | Android/iOS | yes | -| walkthroughable | Wrappable Components | function | no | Android/iOS | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `CopilotProps` | 提示样式属性 | CopilotProps | no | Android/iOS | partially | +| `TooltipProps` | 提示工具属性 | TooltipProps | no | Android/iOS | yes | +| `CopilotProvider` | 自定义提示框样式 | function | no | Android/iOS | yes | +| `CopilotStep` | 自定义组件步骤样式 | function | no | Android/iOS | yes | +| `DefaultUI` | 默认 UI 属性 | object | no | Android/iOS | yes | +| `useCopilot` | 使用提示样式 | function | no | Android/iOS | yes | +| `walkthroughable` | 可包裹组件 | function | no | Android/iOS | yes | ### CopilotProps @@ -284,4 +298,4 @@ const styles = StyleSheet.create({ ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/mohebifar/react-native-copilot/blob/master/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/mohebifar/react-native-copilot/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-drag-sort.md b/zh-cn/react-native-drag-sort.md index d57d58ebf..b08b8f4ce 100644 --- a/zh-cn/react-native-drag-sort.md +++ b/zh-cn/react-native-drag-sort.md @@ -17,7 +17,13 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-drag-sort Releases](https://github.com/react-native-oh-library/react-native-drag-sort/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.4.4 | [@react-native-oh-tpl/react-native-drag-sort Releases](https://github.com/react-native-oh-library/react-native-drag-sort/releases) | 0.72 | +| 2.5.0 | [@react-native-ohos/react-native-drag-sort Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,22 +32,30 @@ #### **yarn** ```bash +# V2.4.4 yarn add @react-native-oh-tpl/react-native-drag-sort + +# V2.5.0 +yarn add @react-native-ohos/react-native-drag-sort ``` #### **npm** ```bash +# V2.4.4 npm install @react-native-oh-tpl/react-native-drag-sort + +# V2.5.0 +npm install @react-native-ohos/react-native-drag-sort ``` ### Tip -> Use priority: DragSortableView > AutoDragSortableView > AnySizeDragSortableView +> 使用优先级: DragSortableView > AutoDragSortableView > AnySizeDragSortableView -- 1、If the width and height are fixed and there is no need to slide, use DragSortableView. -- 2、If the width and height are fixed and you need to slide, use AutoDragSortableView. -- 3、If the width and height are arbitrary and need to slide, please use AnySizeDragSortableView. +- 1、如果宽度和高度是固定的，不需要滑动，请使用DragSortableView。 +- 2、如果宽度和高度是固定的，需要滑动，请使用AutoDragSortableView。 +- 3、如果宽度和高度是任意的，需要滑动，请使用AnySizeDragSortableView。 下面的代码展示了这个库的基本使用场景： @@ -567,7 +581,17 @@ const styles = StyleSheet.create({ 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-drag-sort Releases](https://github.com/react-native-oh-library/react-native-drag-sort/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.4.4 | [@react-native-oh-tpl/react-native-drag-sort Releases](https://github.com/react-native-oh-library/react-native-drag-sort/releases) | 0.72 | +| 2.5.0 | [@react-native-ohos/react-native-drag-sort Releases]() | 0.77 | + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; +2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; + ## 属性 @@ -578,95 +602,95 @@ const styles = StyleSheet.create({ > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 > -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :----------------------: | :---------------------------------------------------------------------: | :------: | :------: | :---------: | :---------------: | -| **dataSource** | DataSource array for list | array | Yes | iOS/Android | Yes | -| **parentWidth** | parent width | number | No | iOS/Android | Yes | -| **childrenHeight** | Each item height | number | Yes | iOS/Android | Yes | -| **childrenWidth** | Each item width | number | Yes | iOS/Android | Yes | -| **marginChildrenTop** | So the item's outermost view adds margin, you can only use this method. | number | No | iOS/Android | Yes | -| **marginChildrenBottom** | Item bottom margin | number | No | iOS/Android | Yes | -| **marginChildrenLeft** | Item left margin | number | No | iOS/Android | Yes | -| **marginChildrenRight** | Item right margin | number | No | iOS/Android | Yes | -| **sortable** | Do not allow dragging | bool | No | iOS/Android | Yes | -| **onClickItem** | click | function | No | iOS/Android | Yes | -| **onDragStart** | Called after dragging starts | function | No | iOS/Android | Yes | -| **onDragEnd** | Called after dragging end | function | No | iOS/Android | Yes | -| **onDataChange** | This method is called every time the data changes. | function | No | iOS/Android | Yes | -| **renderItem** | render item view | function | Yes | iOS/Android | Yes | -| **fixedItems** | no remove | array | No | iOS/Android | Yes | -| **keyExtractor** | (item,index) => key | function | No | iOS/Android | Yes | -| **delayLongPress** | Long press delay | number | No | iOS/Android | Yes | -| **isDragFreely** | Whether to limit the drag space | bool | No | iOS/Android | Yes | -| **onDragging** | Called when dragging | function | No | iOS/Android | Yes | -| **maxScale** | max Scale | number | No | iOS/Android | Yes | -| **minOpacity** | min Opacity | number | No | iOS/Android | Yes | -| **scaleStatus** | scale status | string | No | iOS/Android | Yes | -| **scaleDuration** | scale duration | number | No | iOS/Android | Yes | -| **slideDuration** | slide Duration | number | No | iOS/Android | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---: | :---: | :---: | :---: | :---: | :---: | +| **dataSource** | 列表的数据源数组 | array | Yes | iOS/Android | Yes | +| **parentWidth** | 父容器宽度 | number | No | iOS/Android | Yes | +| **childrenHeight** | 每个子项的高度 | number | Yes | iOS/Android | Yes | +| **childrenWidth** | 每个子项的宽度 | number | Yes | iOS/Android | Yes | +| **marginChildrenTop** | 若要为子项的最外层视图添加边距，只能使用此方法。 | number | No | iOS/Android | Yes | +| **marginChildrenBottom** | 子项下边距 | number | No | iOS/Android | Yes | +| **marginChildrenLeft** | 子项左边距 | number | No | iOS/Android | Yes | +| **marginChildrenRight** | 子项右边距 | number | No | iOS/Android | Yes | +| **sortable** | 是否允许拖拽 | bool | No | iOS/Android | Yes | +| **onClickItem** | 点击事件 | function | No | iOS/Android | Yes | +| **onDragStart** | 拖拽开始后调用 | function | No | iOS/Android | Yes | +| **onDragEnd** | 拖拽结束后调用 | function | No | iOS/Android | Yes | +| **onDataChange** | 每次数据变化时都会调用此方法。 | function | No | iOS/Android | Yes | +| **renderItem** | 渲染子项视图 | function | Yes | iOS/Android | Yes | +| **fixedItems** | 固定项（不可移除） | array | No | iOS/Android | Yes | +| **keyExtractor** | (item,index) => key | function | No | iOS/Android | Yes | +| **delayLongPress** | 长按延迟 | number | No | iOS/Android | Yes | +| **isDragFreely** | 是否限制拖拽空间 | bool | No | iOS/Android | Yes | +| **onDragging** | 拖拽时调用 | function | No | iOS/Android | Yes | +| **maxScale** | 最大缩放比例 | number | No | iOS/Android | Yes | +| **minOpacity** | 最小不透明度 | number | No | iOS/Android | Yes | +| **scaleStatus** | 缩放状态 | string | No | iOS/Android | Yes | +| **scaleDuration** | 缩放持续时间 | number | No | iOS/Android | Yes | +| **slideDuration** | 滑动持续时间 | number | No | iOS/Android | Yes | ### AutoDragSortableView -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :-----------------------: | :----------------------:| :------------------------------------------------------: | :------: | :---------: | :---------------: | -| **dataSource** | DataSource array for list | array | Yes | iOS/Android | Yes | -| **parentWidth** | parent width | number | No | iOS/Android | Yes | -| **childrenHeight** | Each item height | number | Yes | iOS/Android | Yes | -| **childrenWidth** | Each item width | number | Yes | iOS/Android | Yes | -| **marginChildrenTop** | So the item's outermost view adds margin, you can only use this method. | number | No | iOS/Android | Yes | -| **marginChildrenBottom** | Item bottom margin | number | No | iOS/Android | Yes | -| **marginChildrenLeft** | Item left margin | number | No | iOS/Android | Yes | -| **marginChildrenRight** | Item right margin | number | No | iOS/Android | Yes | -| **sortable** | Do not allow dragging | bool | No | iOS/Android | Yes | -| **onClickItem** | click | function | No | iOS/Android | Yes | -| **onDragStart** | Called after dragging starts | function | No | iOS/Android | Yes | -| **onDragEnd** | Called after dragging end | function | No | iOS/Android | Yes | -| **onDataChange** | This method is called every time the data changes. | function | No | iOS/Android | Yes | -| **renderItem** | render item view | function | Yes | iOS/Android | Yes | -| **fixedItems** | no remove | array | No | iOS/Android | Yes | -| **keyExtractor** | (item,index) => key | function | No | iOS/Android | Yes | -| **delayLongPress** | Long press delay | number | No | iOS/Android | Yes | -| **isDragFreely** | Whether to limit the drag space | bool | No | iOS/Android | Yes | -| **onDragging** | Called when dragging | function | No | iOS/Android | Yes | -| **maxScale** | max Scale | number | No | iOS/Android | Yes | -| **minOpacity** | min Opacity | number | No | iOS/Android | Yes | -| **scaleStatus** | scale status | string | No | iOS/Android | Yes | -| **scaleDuration** | scale duration | number | No | iOS/Android | Yes | -| **slideDuration** | slide Duration | number | No | iOS/Android | Yes | -| **autoThrottle** | auto throttle | number | No | iOS/Android | Yes | -| **autoThrottleDuration** | auto throttle duration| number | No | iOS/Android | Yes | -| **renderHeaderView** | render header View | element | No | iOS/Android | Yes | -| **headerViewHeight** | header view height | number | No | iOS/Android | Yes | -| **scrollIndicatorInsets** | margin on scroll | ({top:number, left:number, bottom:number, right:number}) | No | iOS | NO | -| **renderBottomView** | render Bottom View | element | No | iOS/Android | Yes | -| **bottomViewHeight** | bottom view height | number | No | iOS/Android | Yes | -| **onScrollListener** | Listening callback during scrolling| (event: NativeSyntheticEvent) => void | No | iOS/Android | Yes | -| **onScrollRef** |scroll reference callback| (ref: any) => void | No | iOS/Android | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---: | :---: | :---: | :---: | :---: | :---: | +| **dataSource** | 列表的数据源数组 | array | Yes | iOS/Android | Yes | +| **parentWidth** | 父容器宽度 | number | No | iOS/Android | Yes | +| **childrenHeight** | 每个子项的高度 | number | Yes | iOS/Android | Yes | +| **childrenWidth** | 每个子项的宽度 | number | Yes | iOS/Android | Yes | +| **marginChildrenTop** | 若要为子项的最外层视图添加边距，只能使用此方法。 | number | No | iOS/Android | Yes | +| **marginChildrenBottom** | 子项下边距 | number | No | iOS/Android | Yes | +| **marginChildrenLeft** | 子项左边距 | number | No | iOS/Android | Yes | +| **marginChildrenRight** | 子项右边距 | number | No | iOS/Android | Yes | +| **sortable** | 是否允许拖拽 | bool | No | iOS/Android | Yes | +| **onClickItem** | 点击事件 | function | No | iOS/Android | Yes | +| **onDragStart** | 拖拽开始后调用 | function | No | iOS/Android | Yes | +| **onDragEnd** | 拖拽结束后调用 | function | No | iOS/Android | Yes | +| **onDataChange** | 每次数据变化时都会调用此方法。 | function | No | iOS/Android | Yes | +| **renderItem** | 渲染子项视图 | function | Yes | iOS/Android | Yes | +| **fixedItems** | 固定项（不可移除） | array | No | iOS/Android | Yes | +| **keyExtractor** | (item,index) => key | function | No | iOS/Android | Yes | +| **delayLongPress** | 长按延迟 | number | No | iOS/Android | Yes | +| **isDragFreely** | 是否限制拖拽空间 | bool | No | iOS/Android | Yes | +| **onDragging** | 拖拽时调用 | function | No | iOS/Android | Yes | +| **maxScale** | 最大缩放比例 | number | No | iOS/Android | Yes | +| **minOpacity** | 最小不透明度 | number | No | iOS/Android | Yes | +| **scaleStatus** | 缩放状态 | string | No | iOS/Android | Yes | +| **scaleDuration** | 缩放持续时间 | number | No | iOS/Android | Yes | +| **slideDuration** | 滑动持续时间 | number | No | iOS/Android | Yes | +| **autoThrottle** | 自动节流 | number | No | iOS/Android | Yes | +| **autoThrottleDuration** | 自动节流持续时间 | number | No | iOS/Android | Yes | +| **renderHeaderView** | 渲染头部视图 | element | No | iOS/Android | Yes | +| **headerViewHeight** | 头部视图高度 | number | No | iOS/Android | Yes | +| **scrollIndicatorInsets** | 滚动条内边距 | ({top:number, left:number, bottom:number, right:number}) | No | iOS | NO | +| **renderBottomView** | 渲染底部视图 | element | No | iOS/Android | Yes | +| **bottomViewHeight** | 底部视图高度 | number | No | iOS/Android | Yes | +| **onScrollListener** | 滚动期间的监听回调 | (event: NativeSyntheticEvent) => void | No | iOS/Android | Yes | +| **onScrollRef** | 滚动引用回调 | (ref: any) => void | No | iOS/Android | Yes | ### AnySizeDragSortableView -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :-----------------------: | :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | -| **renderItem** | render item view | function | Yes | iOS/Android | Yes | -| **onDataChange** | This method is called every time the data changes | function | Yes | iOS/Android | Yes | -| **renderHeaderView** | render Header View | element | No | iOS/Android | Yes | -| **headerViewHeight** | header view height | number | No | iOS/Android | Yes | -| **renderBottomView** | render Bottom View | element | No | iOS/Android | Yes | -| **bottomViewHeight** | bottom view height | number | No | iOS/Android | Yes | -| **autoThrottle** | auto throttle | number | No | iOS/Android | Yes | -| **autoThrottleDuration** | auto throttle duration | number | No | iOS/Android | Yes | -| **scrollIndicatorInsets** | margin on scroll | ({top:number, left:number, bottom:number, right:number}) | No | iOS/Android | No | -| **onScrollListener** |Listening callback during scrolling | (event: NativeSyntheticEvent) => void | No | iOS/Android | Yes | -| **onScrollRef** | scroll reference callback | (ref: any) => void | No | iOS/Android | Yes | -| **areaOverlapRatio** | Must be greater than 0.5 | number | No | iOS/Android | Yes | -| **movedWrapStyle** | style | StyleProp | Yes | iOS/Android | Yes | -| **childMarginTop** | Subpage top margin | number | No | iOS/Android | Yes | -| **childMarginBottom** | Subpage bottom margin | number | No | iOS/Android | Yes | -| **childMarginLeft** | Subpage left margin | number | No | iOS/Android | Yes | -| **childMarginRight** | Subpage right margin | number | No | iOS/Android | Yes | -| **onDragEnd** | Called after dragging end | function | Yes | iOS/Android | Yes | -| **dataSource** | DataSource array for list | array | Yes | iOS/Android | Yes | -| **keyExtractor** | item's unique key | (item,index) => key | Yes | iOS/Android | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---: | :---: | :---: | :---: | :---: | :---: | +| **renderItem** | 渲染子项视图 | function | Yes | iOS/Android | Yes | +| **onDataChange** | 每次数据变化时都会调用此方法 | function | Yes | iOS/Android | Yes | +| **renderHeaderView** | 渲染头部视图 | element | No | iOS/Android | Yes | +| **headerViewHeight** | 头部视图高度 | number | No | iOS/Android | Yes | +| **renderBottomView** | 渲染底部视图 | element | No | iOS/Android | Yes | +| **bottomViewHeight** | 底部视图高度 | number | No | iOS/Android | Yes | +| **autoThrottle** | 自动节流 | number | No | iOS/Android | Yes | +| **autoThrottleDuration** | 自动节流持续时间 | number | No | iOS/Android | Yes | +| **scrollIndicatorInsets** | 滚动条内边距 | ({top:number, left:number, bottom:number, right:number}) | No | iOS/Android | No | +| **onScrollListener** | 滚动期间的监听回调 | (event: NativeSyntheticEvent) => void | No | iOS/Android | Yes | +| **onScrollRef** | 滚动引用回调 | (ref: any) => void | No | iOS/Android | Yes | +| **areaOverlapRatio** | 必须大于 0.5 | number | No | iOS/Android | Yes | +| **movedWrapStyle** | 样式 | StyleProp | Yes | iOS/Android | Yes | +| **childMarginTop** | 子项上边距 | number | No | iOS/Android | Yes | +| **childMarginBottom** | 子项下边距 | number | No | iOS/Android | Yes | +| **childMarginLeft** | 子项左边距 | number | No | iOS/Android | Yes | +| **childMarginRight** | 子项右边距 | number | No | iOS/Android | Yes | +| **onDragEnd** | 拖拽结束后调用 | function | Yes | iOS/Android | Yes | +| **dataSource** | 列表的数据源数组 | array | Yes | iOS/Android | Yes | +| **keyExtractor** | 项目的唯一键 | (item,index) => key | Yes | iOS/Android | Yes | ## 遗留问题 @@ -676,4 +700,4 @@ const styles = StyleSheet.create({ ## 开源协议 -本项目基于 [The Apache License (Apache)](https://github.com/mochixuan/react-native-drag-sort/blob/master/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The Apache License (Apache)](https://github.com/mochixuan/react-native-drag-sort/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-error-boundary.md b/zh-cn/react-native-error-boundary.md index cff2fdb41..720e7caa3 100644 --- a/zh-cn/react-native-error-boundary.md +++ b/zh-cn/react-native-error-boundary.md @@ -1,36 +1,79 @@ > 模板版本：v0.2.2

-

react-native-error-boundary

+

react-navigation-header-buttons

- + Supported platforms - + License

-> [!TIP] [Github 地址](https://github.com/carloscuesta/react-native-error-boundary) +> [!TIP] [Github 地址](https://github.com/vonovak/react-navigation-header-buttons) ## 安装与使用 -进入到工程目录并输入以下命令： +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 12.0.0 | 0.72 | +| 13.0.0 | 0.77 | + + +进入到工程目录并输入以下命令： #### **npm** ```bash -npm i react-native-error-boundary@1.2.4 +# V12.0.0 +npm i react-navigation-header-buttons@12.0.0 + +# V13.0.0 +npm i react-navigation-header-buttons@13.0.0 ``` #### **yarn** ```bash -yarn add react-native-error-boundary@1.2.4 +# V12.0.0 +yarn add react-navigation-header-buttons@12.0.0 + +# V13.0.0 +yarn add react-navigation-header-buttons@13.0.0 +``` + + +在tsconfig.json文件中添加如下代码: +```json +"compilerOptions": { + ... + "paths": { + ... + "react-navigation-header-buttons":[ + "./node_modules/react-navigation-header-buttons/lib/module/index.js" + ] + }, + } + +``` +在metro.config.js文件中添加如下代码: +```js +const config = { +... + resolver: { + unstable_enablePackageExports: true, + }, +}; +module.exports = mergeConfig( + ... + config, +); + ``` @@ -39,87 +82,163 @@ yarn add react-native-error-boundary@1.2.4 > [!WARNING] 使用时 import 的库名不变。 -```ts -import React, { PropsWithChildren, useState } from 'react'; -import { StyleSheet, Button } from 'react-native'; -import ErrorBoundary from 'react-native-error-boundary'; - -export const ErrorBoundaryDefaultExample = () => { - const [shouldThrow, setShouldThrow] = useState(false); - - return ( - -