From 700855cc9dc110a643a583247bf14b2345c65f1e Mon Sep 17 00:00:00 2001 From: renzhenhua <908237408@qq.com> Date: Mon, 20 Nov 2023 14:39:11 +0800 Subject: [PATCH 1/3] edit checkbox.md --- README.md | 4 +- zh-cn/react-native-checkbox.md | 96 ++++++++++++++++++------------- zh-cn/react-native-masked-view.md | 2 +- 3 files changed, 60 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 0f594bcf..7118baf7 100644 --- a/README.md +++ b/README.md @@ -14,8 +14,8 @@ | 2 | @react-native-picker/picker | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker@2.5.1-0.0.1](https://github.com/react-native-oh-library/picker/releases/tag/2.5.1-0.0.1) | [链接](zh-cn/picker.md) | | 3 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox@0.5.16-0.0.1](https://github.com/react-native-oh-library/react-native-checkbox/releases/tag/0.5.16-0.0.1) | [链接](zh-cn/react-native-checkbox.md) | | 4 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider@4.4.3-0.1.1](https://github.com/react-native-oh-library/react-native-slider/releases/tag/4.4.3-0.1.1) | [链接](zh-cn/react-native-slider.md) | -| 4 | @react-native-masked-view/masked-view | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view@0.2.9-0.0.1](https://github.com/react-native-oh-library/masked-view/releases/tag/0.2.9-0.0.1) | [链接](zh-cn/react-native-masked-view.md) | - +| 5 | @react-native-masked-view/masked-view | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view@0.2.9-0.0.1](https://github.com/react-native-oh-library/masked-view/releases/tag/0.2.9-0.0.1) | [链接](zh-cn/react-native-masked-view.md) | +| 6 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox@0.5.16-0.0.2](https://github.com/react-native-oh-library/react-native-checkbox/releases/tag/0.5.16-0.0.2) | [链接](zh-cn/react-native-checkbox.md) | ## 社区 [react-native-oh-library](https://github.com/react-native-oh-library) \ No newline at end of file diff --git a/zh-cn/react-native-checkbox.md b/zh-cn/react-native-checkbox.md index 1a47b1cd..e97be791 100644 --- a/zh-cn/react-native-checkbox.md +++ b/zh-cn/react-native-checkbox.md @@ -23,13 +23,13 @@ 进入到工程目录并输入以下命令： ```bash -yarn add rnoh-checkbox@npm:@react-native-oh-library/checkbox@0.5.16-0.0.1 +yarn add @react-native-community/checkbox@npm:@react-native-oh-library/checkbox ``` 或者 ```bash -npm install rnoh-checkbox@npm:@react-native-oh-library/checkbox@0.5.16-0.0.1 +npm install @react-native-community/checkbox@npm:@react-native-oh-library/checkbox ``` 下面的代码展示了这个库的基本使用场景： @@ -58,14 +58,21 @@ import CheckBox from '@react-native-community/checkbox'; /> ``` -### Link +## Link 目前鸿蒙暂不支持 AutoLink，所以Link步骤需要手动配置。 首先需要使用DevEco Studio打开项目里的鸿蒙工程 `harmony` -#### 引入原生端代码 -打开 `entry/oh-package.json5`，添加以下依赖，引入鸿蒙原生端的代码 +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 +打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { @@ -74,7 +81,33 @@ import CheckBox from '@react-native-community/checkbox'; } ``` -#### 配置CMakeLists和引入CheckboxPackge +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-slider": "file:../../node_modules/rnoh-checkbox/harmony/checkbox" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 配置CMakeLists和引入CheckboxPackge 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -123,7 +156,7 @@ std::vector> PackageProvider::getPackages(Package::Cont ``` -#### 在ArkTs侧引入Checkbox组件 +### 在ArkTs侧引入 Checkbox 组件 打开 `entry/src/main/ets/pages/index.ets`，添加： @@ -167,7 +200,7 @@ struct Index { } ``` -#### 运行 +### 运行 点击右上角的 `sync` 按钮 @@ -186,43 +219,28 @@ ohpm install | `@react-native-oh-library/checkbox` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | | ---------------------------------------- | ----------------------------- | ----------------------------- | ----------------------------- | ----------------------------- | -| `0.5.16-0.0.1` | `>=0.72.5` | `>=0.72.6` | `>=4.0.3.501` | `>=OpenHarmony 4.10.10` | - - - - - +| `0.5.16-0.0.2` | `>=0.72.5` | `>=0.72.6` | `>=4.0.3.501` | `>=OpenHarmony 4.10.10` | ## 属性 -## Common Props - -[View props...](https://reactnative.dev/docs/view#props) - -| Prop name | Type | Description | -| ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| onChange | function | Invoked on change with the native event. | -| onValueChange | function | Invoked with the new boolean value when it changes. | -| value | boolean | The value of the checkbox. If true the checkbox will be turned on. Default value is false. | -| testID | string | Used to locate this view in end-to-end tests. -| disabled | boolean | If true the user won't be able to toggle the checkbox. Default value is false. - - -## Harmony Props - - - -| Prop name | Type | Description | -| ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| onCheckColor | Color | Color of the check box when it is selected. | -| tintColor | Color | Border color of the check box when it is not selected. | -| markSize | number | 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. | -| strokeWidth | number | 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. | -| strokeColor | Color | Color of the internal mark. | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- | ------------ | -------- | +| `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 | +| `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 | +## 遗留问题 ## 其他 -### 贡献 +## 开源协议 +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-checkbox/blob/harmony/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-masked-view.md b/zh-cn/react-native-masked-view.md index c2b7a8bf..b933f978 100644 --- a/zh-cn/react-native-masked-view.md +++ b/zh-cn/react-native-masked-view.md @@ -232,7 +232,7 @@ ohpm install | `@react-native-oh-library/masked-view` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | | ----------------------------------------- | ----------------------------- | --------------------- | ------------------------------ | --------------------- | -| `4.4.3-0.1.1` | `0.72.5` | `0.72.10` | `4.0.3.601` | `OpenHarmony 4.10.10` | +| `0.2.9-0.0.1` | `0.72.5` | `0.72.10` | `4.0.3.601` | `OpenHarmony 4.10.10` | ## 属性 -- Gitee From ae24220e20d4a0db5e44f1631d77c58a849374da Mon Sep 17 00:00:00 2001 From: renzhenhua <908237408@qq.com> Date: Mon, 20 Nov 2023 14:44:36 +0800 Subject: [PATCH 2/3] edit checkbox.md --- zh-cn/react-native-checkbox.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/react-native-checkbox.md b/zh-cn/react-native-checkbox.md index e97be791..e3bb693b 100644 --- a/zh-cn/react-native-checkbox.md +++ b/zh-cn/react-native-checkbox.md @@ -96,7 +96,7 @@ ohpm install ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-slider": "file:../../node_modules/rnoh-checkbox/harmony/checkbox" + "rnoh-checkbox": "file:../../node_modules/rnoh-checkbox/harmony/checkbox" } ``` -- Gitee From dc320fc8a994d069ab1bb8eeb745c4c439ed1666 Mon Sep 17 00:00:00 2001 From: renzhenhua <908237408@qq.com> Date: Mon, 20 Nov 2023 14:53:33 +0800 Subject: [PATCH 3/3] edit checkbox.md --- zh-cn/react-native-checkbox.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/zh-cn/react-native-checkbox.md b/zh-cn/react-native-checkbox.md index e3bb693b..4683b14e 100644 --- a/zh-cn/react-native-checkbox.md +++ b/zh-cn/react-native-checkbox.md @@ -77,7 +77,7 @@ import CheckBox from '@react-native-community/checkbox'; ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-checkbox": "file:../../node_modules/rnoh-checkbox/harmony/checkbox.har" + "rnoh-checkbox": "file:../../node_modules/@react-native-community/checkbox/harmony/checkbox.har" } ``` @@ -96,7 +96,7 @@ ohpm install ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-checkbox": "file:../../node_modules/rnoh-checkbox/harmony/checkbox" + "rnoh-checkbox": "file:../../node_modules/@react-native-community/checkbox/harmony/checkbox" } ``` -- Gitee