diff --git a/README.md b/README.md index 0f594bcfd9798d4ea76540ad1387a8710e70c53c..7118baf77b0e13cbdfed2be6b2085815c0865c50 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 1a47b1cd5f1fcda1048501912ea5b39c84f6c42c..4683b14e4f61401b18ba36c93ef0f1d02aeef0aa 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,23 +58,56 @@ 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": { + "rnoh": "file:../rnoh", + "rnoh-checkbox": "file:../../node_modules/@react-native-community/checkbox/harmony/checkbox.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 +打开 `entry/oh-package.json5`，添加以下依赖 ```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" } ``` -#### 配置CMakeLists和引入CheckboxPackge +打开终端，执行： + +```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 c2b7a8bf06f2866875e29b62e3d09652e19d6878..b933f97875d96b9498faafae3555627be8f3c512 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` | ## 属性