From 358ad2503ccd274659ff1c4ce76e127cc52d4ae6 Mon Sep 17 00:00:00 2001 From: 17691189070 <1581941486@qq.com> Date: Fri, 31 May 2024 17:36:03 +0800 Subject: [PATCH 1/3] =?UTF-8?q?docs:=20[Issues:=20#I9U2FI]=E4=BF=AE?= =?UTF-8?q?=E6=94=B9react-native-progress=20=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-progress.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/zh-cn/react-native-progress.md b/zh-cn/react-native-progress.md index 6d610151..37591676 100644 --- a/zh-cn/react-native-progress.md +++ b/zh-cn/react-native-progress.md @@ -35,6 +35,12 @@ yarn add @react-native-oh-tpl/react-native-progress@file:# +如果在node_modules 里面没有react-native-progress 执行一次下面命令，如果已经存在则不要执行 + +``` + npm install react-native-progress +``` + 下面的代码展示了这个库的基本使用场景： > [!WARNING] 使用时 import 的库名不变。 -- Gitee From 7e40e1adf1f15b6d7f7e81e5c51a31611bbd0134 Mon Sep 17 00:00:00 2001 From: 17691189070 <1581941486@qq.com> Date: Fri, 31 May 2024 18:02:15 +0800 Subject: [PATCH 2/3] =?UTF-8?q?docs:=20[Issues:=20#I9U2YF]=E4=BF=AE?= =?UTF-8?q?=E6=94=B9react-native-community/checkbox=20=E6=B2=A1=E6=9C=89?= =?UTF-8?q?=E5=AF=BC=E5=87=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-community-checkbox.md | 44 ++++++++++++++---------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/zh-cn/react-native-community-checkbox.md b/zh-cn/react-native-community-checkbox.md index e4d444a1..6676ed0f 100644 --- a/zh-cn/react-native-community-checkbox.md +++ b/zh-cn/react-native-community-checkbox.md @@ -43,27 +43,33 @@ yarn add @react-native-oh-tpl/checkbox@file:# > [!WARNING] 使用时 import 的库名不变。 ```js +import React, { useState } from "react"; 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----"); - }} -/>; +function RNCCommunityCheckBoxDemo() { + const [toggleCheckBox, setToggleCheckBox] = useState(false) + const [msg2, setMsg2] = useState("") + const [msg, setMsg] = useState("") + const [value, setValue] = useState(false) + + return { + console.log("" + event.nativeEvent.value); + setMsg2("onChange" + event.nativeEvent.target); + setValue(event.nativeEvent.value); + }} + onValueChange={(newValue) => { + setToggleCheckBox(newValue); + setMsg("onValueChange----"); + }} + /> +} +export default RNCCommunityCheckBoxDemo ``` ## Link -- Gitee From 8d3f63c1018529a43dc5a290052b5d135711daca Mon Sep 17 00:00:00 2001 From: zhangwl Date: Sat, 1 Jun 2024 02:26:09 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20zh-c?= =?UTF-8?q?n/react-native-community-checkbox.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-community-checkbox.md | 237 ----------------------- 1 file changed, 237 deletions(-) delete mode 100644 zh-cn/react-native-community-checkbox.md diff --git a/zh-cn/react-native-community-checkbox.md b/zh-cn/react-native-community-checkbox.md deleted file mode 100644 index 6676ed0f..00000000 --- a/zh-cn/react-native-community-checkbox.md +++ /dev/null @@ -1,237 +0,0 @@ -> 模板版本：v0.1.3 - -

-

@react-native-community/checkbox

-

-

- - Supported platforms - - - License - -

- -> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-checkbox) - -## 安装与使用 - -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/checkbox Releases](https://github.com/react-native-oh-library/react-native-checkbox/releases)，并下载适用版本的 tgz 包。 - -进入到工程目录并输入以下命令： - -> [!TIP] # 处替换为 tgz 包的路径 - - - -#### **npm** - -```bash -npm install @react-native-oh-tpl/checkbox@file:# -``` - -#### **yarn** - -```bash -yarn add @react-native-oh-tpl/checkbox@file:# -``` - - - -下面的代码展示了这个库的基本使用场景： - -> [!WARNING] 使用时 import 的库名不变。 - -```js -import React, { useState } from "react"; -import CheckBox from "@react-native-community/checkbox"; - -function RNCCommunityCheckBoxDemo() { - const [toggleCheckBox, setToggleCheckBox] = useState(false) - const [msg2, setMsg2] = useState("") - const [msg, setMsg] = useState("") - const [value, setValue] = useState(false) - - return { - console.log("" + event.nativeEvent.value); - setMsg2("onChange" + event.nativeEvent.target); - setValue(event.nativeEvent.value); - }} - onValueChange={(newValue) => { - setToggleCheckBox(newValue); - setMsg("onValueChange----"); - }} - /> -} -export default RNCCommunityCheckBoxDemo -``` - -## Link - -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 - -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` - -### 引入原生端代码 - -目前有两种方法： - -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 - -方法一：通过 har 包引入 - -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-checkbox": "file:../../node_modules/@react-native-oh-tpl/checkbox/harmony/checkbox.har" - } -``` - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -方法二：直接链接源码 - -> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) - -### 配置 CMakeLists 和引入 CheckboxPackge - -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： - -```diff -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(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") - -add_subdirectory("${RNOH_CPP_DIR}" ./rn) - -# RNOH_BEGIN: add_package_subdirectories -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_library(rnoh_app SHARED - "./PackageProvider.cpp" - "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" -) - -target_link_libraries(rnoh_app PUBLIC rnoh) - -# RNOH_BEGIN: link_packages -target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh_checkbox) -# RNOH_END: link_packages -``` - -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： - -```diff -#include "RNOH/PackageProvider.h" -#include "SamplePackage.h" -+ #include "CheckboxPackage.h" - -using namespace rnoh; - -std::vector> PackageProvider::getPackages(Package::Context ctx) { - return { - std::make_shared(ctx), -+ std::make_shared(ctx) - }; -} -``` - -### 在 ArkTs 侧引入 Checkbox 组件 - -找到 **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) { -+ RNCCheckbox({ -+ ctx: ctx.rnComponentContext, -+ tag: ctx.tag, -+ buildCustomComponent: buildCustomComponent -+ }) -+ } - ... - } - ... -``` - -### 运行 - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -然后编译、运行即可。 - -## 兼容性 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/checkbox Releases](https://github.com/react-native-oh-library/react-native-checkbox/releases) - -## 属性 - -> [!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 | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-checkbox/blob/harmony/LICENSE) ，请自由地享受和参与开源。 -- Gitee