Skip to content

Commit b045b0d

Browse files
liuwenliang0129林志鹏
liuwenliang0129
authored and
林志鹏
committed
!1349 docs: 【Issures: #IAHZ96】修改 react-native-community-checkbox 指导文档
* docs: [Issues: IAHZ96] 修改 react-native-community-checkbox 指导文档
1 parent 764a45b commit b045b0d

File tree

1 file changed

+94
-66
lines changed

1 file changed

+94
-66
lines changed

‎zh-cn/react-native-community-checkbox.md

+94-66
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
<!-- {% raw %} -->
2-
> 模板版本：v0.1.3
1+
> 模板版本：v0.2.2
32
43
<p align="center">
54
<h1 align="center"> <code>@react-native-community/checkbox</code> </h1>
65
</p>
76
<p align="center">
8-
<a href="https://github.com/callstack/react-native-checkbox">
7+
<a href="https://github.com/react-native-checkbox/react-native-checkbox">
98
<img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20windows%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
109
</a>
1110
<a href="https://github.com/react-native-checkbox/react-native-checkbox/blob/develop/LICENSE">
@@ -45,26 +44,27 @@ yarn add @react-native-oh-tpl/checkbox@file:#
4544
4645
```js
4746
import CheckBox from "@react-native-community/checkbox";
48-
49-
<CheckBox
50-
disabled={false}
51-
value={toggleCheckBox}
52-
style={{ width: 70, height: 70 }}
53-
tintColor={"red"}
54-
onCheckColor={"green"}
55-
onChange={(event) => {
56-
console.log("" + event.nativeEvent.value);
57-
setMsg2("onChange" + event.nativeEvent.target);
58-
setValue(event.nativeEvent.value);
59-
}}
60-
markSize={70}
61-
strokeColor={"yellow"}
62-
strokeWidth={5}
63-
onValueChange={(newValue) => {
64-
setToggleCheckBox(newValue);
65-
setMsg("onValueChange----");
66-
}}
67-
/>;
47+
import { useState } from "react";
48+
49+
export default function CheckBoxExample() {
50+
const [value, setValue] = useState<boolean>(false)
51+
const [toggleCheckBox, setToggleCheckBox] = useState<boolean>(false)
52+
return (
53+
<CheckBox
54+
disabled={false}
55+
value={toggleCheckBox}
56+
style={{ width: 70, height: 70 }}
57+
tintColor={"red"}
58+
onCheckColor={"green"}
59+
onChange={(event) => {
60+
setValue(event.nativeEvent.value);
61+
}}
62+
onValueChange={(newValue) => {
63+
setToggleCheckBox(newValue);
64+
}}
65+
/>
66+
)
67+
}
6868
```
6969

7070
## Link
@@ -80,7 +80,7 @@ import CheckBox from "@react-native-community/checkbox";
8080
1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
8181
2. 直接链接源码。
8282

83-
方法一：通过 har 包引入
83+
方法一：通过 har 包引入（推荐）
8484

8585
> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
8686
@@ -90,7 +90,7 @@ import CheckBox from "@react-native-community/checkbox";
9090
"dependencies": {
9191
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
9292

93-
"rnoh-checkbox": "file:../../node_modules/@react-native-oh-tpl/checkbox/harmony/checkbox.har"
93+
"@react-native-oh-tpl/checkbox": "file:../../node_modules/@react-native-oh-tpl/checkbox/harmony/checkbox.har",
9494
}
9595
```
9696

@@ -115,27 +115,28 @@ ohpm install
115115
project(rnapp)
116116
cmake_minimum_required(VERSION 3.4.1)
117117
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
118-
set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
118+
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
119119
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
120120

121121
add_subdirectory("${RNOH_CPP_DIR}" ./rn)
122122

123-
# RNOH_BEGIN: add_package_subdirectories
123+
# RNOH_BEGIN: manual_package_linking_1
124124
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
125-
+ add_subdirectory("${OH_MODULE_DIR}/rnoh-checkbox/src/main/cpp" ./checkbox)
126-
# RNOH_END: add_package_subdirectories
125+
+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/checkbox/src/main/cpp" ./checkbox)
126+
# RNOH_END: manual_package_linking_1
127127

128128
add_library(rnoh_app SHARED
129+
${GENERATED_CPP_FILES}
129130
"./PackageProvider.cpp"
130131
"${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
131132
)
132133

133134
target_link_libraries(rnoh_app PUBLIC rnoh)
134135

135-
# RNOH_BEGIN: link_packages
136+
# RNOH_BEGIN: manual_package_linking_2
136137
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
137138
+ target_link_libraries(rnoh_app PUBLIC rnoh_checkbox)
138-
# RNOH_END: link_packages
139+
# RNOH_END: manual_package_linking_2
139140
```
140141

141142
打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
@@ -157,33 +158,37 @@ std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Cont
157158

158159
### 在 ArkTs 侧引入 Checkbox 组件
159160

160-
找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加：
161+
找到 `function buildCustomComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加：
161162

162163
```diff
163-
...
164-
import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
165-
import { createRNPackages } from '../RNPackagesFactory'
166-
+ import { RNCCheckbox, CHECKBOX_TYPE } from "rnoh-checkbox"
167-
168-
@Builder
169-
function buildCustomComponent(ctx: ComponentBuilderContext) {
170-
if (ctx.componentName === SAMPLE_VIEW_TYPE) {
171-
SampleView({
172-
ctx: ctx.rnComponentContext,
173-
tag: ctx.tag,
174-
buildCustomComponent: buildCustomComponent
175-
})
176-
}
177-
+ else if (ctx.componentName === CHECKBOX_TYPE) {
164+
...
165+
+ import { RNCCheckbox, CHECKBOX_TYPE } from "@react-native-oh-tpl/checkbox"
166+
167+
@Builder
168+
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
169+
...
170+
+ if (ctx.componentName === CHECKBOX_TYPE) {
178171
+ RNCCheckbox({
179172
+ ctx: ctx.rnComponentContext,
180173
+ tag: ctx.tag,
181-
+ buildCustomComponent: buildCustomComponent
182174
+ })
183175
+ }
184-
...
176+
...
185177
}
186-
...
178+
...
179+
```
180+
181+
> [!TIP] 本库使用了混合方案，需要添加组件名。
182+
183+
在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名
184+
185+
```diff
186+
const arkTsComponentNames: Array<string> = [
187+
SampleView.NAME,
188+
GeneratedSampleView.NAME,
189+
PropsDisplayer.NAME,
190+
+ CHECKBOX_TYPE
191+
];
187192
```
188193

189194
### 运行
@@ -199,7 +204,11 @@ ohpm install
199204

200205
然后编译、运行即可。
201206

202-
## 兼容性
207+
## 约束与限制
208+
209+
### 兼容性
210+
211+
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
203212

204213
请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/checkbox Releases](https://github.com/react-native-oh-library/react-native-checkbox/releases)
205214

@@ -209,26 +218,45 @@ ohpm install
209218
210219
> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
211220
221+
| Name | Description | Type | Required | Platform | HarmonyOS Support |
222+
|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -------- | -------- |-------------|------------------|
223+
| `value` | The value of the checkbox. If true the checkbox will be turned on. Default value is false. | boolean | No | Android、iOS | yes |
224+
| `testID` | Used to locate this view in end-to-end tests. | string | No | Android、iOS | yes |
225+
| `disabled` | If true the user won't be able to toggle the checkbox. Default value is false. | bool | No | Android、iOS | yes |
226+
| `onCheckColor` | Color of the check box when it is selected. | Color | No | iOS | yes |
227+
| `tintColor` | Border color of the check box when it is not selected. | Color | No | iOS | yes |
228+
| `shape` | Sets component shapes, including circles and rounded squares. Default value is 0. | int | No | harmony | yes |
229+
| `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 |
230+
| `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 |
231+
| `strokeColor` | Color of the internal mark. | Color | No | harmony | yes |
232+
| `lineWidth` | The width of the lines of the check mark and box. Defaults to 2.0. | number | No | iOS | No |
233+
| `hideBox` | Control if the box should be hidden or not. Defaults to false. | boolean | No | iOS | No |
234+
| `onFillColor` | The color of the inside of the box when it is On. Defaults to transparent. | string | No | iOS | No |
235+
| `onTintColor` | The color of the line around the box when it is On. Defaults to '#007aff'. | string | No | iOS | No |
236+
| `animationDuration` | The duration in seconds of the animations. Defaults to 0.5. | number | No | iOS | No |
237+
| `onAnimationType` | The type of animation to use when the checkbox gets checked. Default to 'stroke'. | 'stroke' or 'fill' or 'bounce' or 'flat' or 'one-stroke' or 'fade' | No | iOS | No |
238+
| `offAnimationType` | The type of animation to use when the checkbox gets unchecked. 'stroke'. | 'stroke' or 'fill' or 'bounce' or 'flat' or 'one-stroke' or 'fade' | No | iOS | No |
239+
## 静态方法
240+
241+
> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
242+
243+
> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
244+
212245
| Name | Description | Type | Required | Platform | HarmonyOS Support |
213246
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ------------- | ----------------- |
214-
| `onChange` | Invoked on change with the native event. | function | No | All | yes |
215-
| `onValueChange` | Invoked with the new boolean value when it changes. | function | No | All | yes |
216-
| `value` | The value of the checkbox. If true the checkbox will be turned on. Default value is false. | boolean | No | All | yes |
217-
| `testID` | Used to locate this view in end-to-end tests. | string | No | All | yes |
218-
| `disabled` | If true the user won't be able to toggle the checkbox. Default value is false. | bool | No | All | yes |
219-
| `onCheckColor` | Color of the check box when it is selected. | Color | No | ios & harmony | yes |
220-
| `tintColor` | Border color of the check box when it is not selected. | Color | No | ios & harmony | yes |
221-
| `shape` | Sets component shapes, including circles and rounded squares. Default value is 0. | int | No | harmony | yes |
222-
| `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 |
223-
| `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 |
224-
| `strokeColor` | Color of the internal mark. | Color | No | harmony | yes |
247+
| `onChange` | Invoked on change with the native event. | function | No | Android、iOS | yes |
248+
| `onValueChange` | Invoked with the new boolean value when it changes. | function | No | Android、iOS | yes |
225249

226250
## 遗留问题
227-
251+
- [ ] 设置lineWidth属性，该属性用来控制复选框的线条宽度，未实现HarmonyOS化: [issue#3](https://github.com/react-native-oh-library/react-native-checkbox/issues/3)
252+
- [ ] 设置hideBox属性，该属性用来控制复选框的显示与隐藏，未实现HarmonyOS化: [issue#4](https://github.com/react-native-oh-library/react-native-checkbox/issues/4)
253+
- [ ] 设置onTintColor属性，该属性用来控制复选框的选中时边框的颜色，未实现HarmonyOS化: [issue#5](https://github.com/react-native-oh-library/react-native-checkbox/issues/5)
254+
- [ ] 设置onFillColor属性，该属性用来控制复选框未选中时框内部的颜色，未实现HarmonyOS化: [issue#9](https://github.com/react-native-oh-library/react-native-checkbox/issues/9)
255+
- [ ] 设置animationDuration属性，该属性用来控制选中和取消选中的动画持续时间，未实现HarmonyOS化: [issue#6](https://github.com/react-native-oh-library/react-native-checkbox/issues/6)
256+
- [ ] 设置onAnimationType属性，该属性用来控制选中时的动画类型，未实现 HarmonyOS化: [issue#7](https://github.com/react-native-oh-library/react-native-checkbox/issues/7)
257+
- [ ] 设置offAnimationType属性，该属性用来控制取消选中时的动画类型，未实现 HarmonyOS化: [issue#8](https://github.com/react-native-oh-library/react-native-checkbox/issues/8)
228258
## 其他
229259

230260
## 开源协议
231261

232-
本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-checkbox/blob/harmony/LICENSE) ，请自由地享受和参与开源。
233-
234-
<!-- {% endraw %} -->
262+
本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-checkbox/blob/harmony/LICENSE) ，请自由地享受和参与开源。

0 commit comments

Comments
 (0)