From 52a7a3184e3438129d11fffa7cc4bac471b29956 Mon Sep 17 00:00:00 2001 From: lwx1350589 Date: Tue, 6 Aug 2024 09:21:26 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20IAHZ96]=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=20react-native-community-checkbox=20=E6=8C=87=E5=AF=BC?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-community-checkbox.md | 140 +++++++++++++---------- 1 file changed, 78 insertions(+), 62 deletions(-) diff --git a/zh-cn/react-native-community-checkbox.md b/zh-cn/react-native-community-checkbox.md index 7cc604ae..0d89ea1c 100644 --- a/zh-cn/react-native-community-checkbox.md +++ b/zh-cn/react-native-community-checkbox.md @@ -1,5 +1,4 @@ - -> 模板版本：v0.1.3 +> 模板版本：v0.2.2

@react-native-community/checkbox

@@ -45,26 +44,27 @@ yarn add @react-native-oh-tpl/checkbox@file:# ```js import CheckBox from "@react-native-community/checkbox"; - - { - console.log("" + event.nativeEvent.value); - setMsg2("onChange" + event.nativeEvent.target); - setValue(event.nativeEvent.value); - }} - markSize={70} - strokeColor={"yellow"} - strokeWidth={5} - onValueChange={(newValue) => { - setToggleCheckBox(newValue); - setMsg("onValueChange----"); - }} -/>; +import { useState } from "react"; + +export default function CheckBoxExample() { + const [value, setValue] = useState(false) + const [toggleCheckBox, setToggleCheckBox] = useState(false) + return ( + { + setValue(event.nativeEvent.value); + }} + onValueChange={(newValue) => { + setToggleCheckBox(newValue); + }} + /> + ) +} ``` ## Link @@ -90,7 +90,7 @@ import CheckBox from "@react-native-community/checkbox"; "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "rnoh-checkbox": "file:../../node_modules/@react-native-oh-tpl/checkbox/harmony/checkbox.har" + "@react-native-oh-tpl/checkbox": "file:../../node_modules/@react-native-oh-tpl/checkbox/harmony/checkbox.har", } ``` @@ -115,27 +115,28 @@ ohpm install project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") add_subdirectory("${RNOH_CPP_DIR}" ./rn) -# RNOH_BEGIN: add_package_subdirectories +# RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-checkbox/src/main/cpp" ./checkbox) -# RNOH_END: add_package_subdirectories ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/checkbox/src/main/cpp" ./checkbox) +# RNOH_END: manual_package_linking_1 add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} "./PackageProvider.cpp" "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" ) target_link_libraries(rnoh_app PUBLIC rnoh) -# RNOH_BEGIN: link_packages +# RNOH_BEGIN: manual_package_linking_2 target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) + target_link_libraries(rnoh_app PUBLIC rnoh_checkbox) -# RNOH_END: link_packages +# RNOH_END: manual_package_linking_2 ``` 打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： @@ -157,33 +158,37 @@ std::vector> PackageProvider::getPackages(Package::Cont ### 在 ArkTs 侧引入 Checkbox 组件 -找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： +找到 `function buildCustomComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： ```diff ... -import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" -import { createRNPackages } from '../RNPackagesFactory' -+ import { RNCCheckbox, CHECKBOX_TYPE } from "rnoh-checkbox" - - @Builder - function buildCustomComponent(ctx: ComponentBuilderContext) { - if (ctx.componentName === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnComponentContext, - tag: ctx.tag, - buildCustomComponent: buildCustomComponent - }) - } -+ else if (ctx.componentName === CHECKBOX_TYPE) { ++ import { RNCCheckbox, CHECKBOX_TYPE } from "@react-native-oh-tpl/checkbox" + +@Builder +export function buildCustomRNComponent(ctx: ComponentBuilderContext) { +... ++ if (ctx.componentName === CHECKBOX_TYPE) { + RNCCheckbox({ + ctx: ctx.rnComponentContext, + tag: ctx.tag, -+ buildCustomComponent: buildCustomComponent + }) + } - ... +... } - ... +... +``` + +> [!TIP] 本库使用了混合方案，需要添加组件名。（如使用混合方案） + +在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名 + +```diff +const arkTsComponentNames: Array = [ + SampleView.NAME, + GeneratedSampleView.NAME, + PropsDisplayer.NAME, ++ CHECKBOX_TYPE + ]; ``` ### 运行 @@ -199,7 +204,11 @@ ohpm install 然后编译、运行即可。 -## 兼容性 +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/checkbox Releases](https://github.com/react-native-oh-library/react-native-checkbox/releases) @@ -209,19 +218,28 @@ ohpm install > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |-------------| ----------------- | +| `value` | The value of the checkbox. If true the checkbox will be turned on. Default value is false. | boolean | No | Android、iOS | yes | +| `testID` | Used to locate this view in end-to-end tests. | string | No | Android、iOS | yes | +| `disabled` | If true the user won't be able to toggle the checkbox. Default value is false. | bool | No | Android、iOS | yes | +| `onCheckColor` | Color of the check box when it is selected. | Color | No | iOS | yes | +| `tintColor` | Border color of the check box when it is not selected. | Color | No | iOS | yes | +| `shape` | Sets component shapes, including circles and rounded squares. Default value is 0. | int | No | harmony | yes | +| `markSize` | Size of the internal mark. The default size is the same as the width of the check box.This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used. | number | No | harmony | yes | +| `strokeWidth` | Stroke width of the internal mark. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used. | number | No | harmony | yes | +| `strokeColor` | Color of the internal mark. | Color | No | harmony | yes | + +## 静态方法 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ------------- | ----------------- | -| `onChange` | Invoked on change with the native event. | function | No | All | yes | -| `onValueChange` | Invoked with the new boolean value when it changes. | function | No | All | yes | -| `value` | The value of the checkbox. If true the checkbox will be turned on. Default value is false. | boolean | No | All | yes | -| `testID` | Used to locate this view in end-to-end tests. | string | No | All | yes | -| `disabled` | If true the user won't be able to toggle the checkbox. Default value is false. | bool | No | All | yes | -| `onCheckColor` | Color of the check box when it is selected. | Color | No | ios & harmony | yes | -| `tintColor` | Border color of the check box when it is not selected. | Color | No | ios & harmony | yes | -| `shape` | Sets component shapes, including circles and rounded squares. Default value is 0. | int | No | harmony | yes | -| `markSize` | Size of the internal mark. The default size is the same as the width of the check box.This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used. | number | No | harmony | yes | -| `strokeWidth` | Stroke width of the internal mark. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used. | number | No | harmony | yes | -| `strokeColor` | Color of the internal mark. | Color | No | harmony | yes | +| `onChange` | Invoked on change with the native event. | function | No | Android、iOS | yes | +| `onValueChange` | Invoked with the new boolean value when it changes. | function | No | Android、iOS | yes | ## 遗留问题 @@ -229,6 +247,4 @@ ohpm install ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-checkbox/blob/harmony/LICENSE) ，请自由地享受和参与开源。 - - \ No newline at end of file +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-checkbox/blob/harmony/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file -- Gitee