From 07f9b258dc10bd7e7d03a8089d9ef5d9eec0ab52 Mon Sep 17 00:00:00 2001 From: zhengjinshou Date: Fri, 29 Nov 2024 15:20:25 +0800 Subject: [PATCH] =?UTF-8?q?=20docs:=20=20[Issues:=20#IB7WNJ]=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=20react-native-community/checkbox=20=E6=96=87?= =?UTF-8?q?=E6=A1=A3=20v0.3.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/model-gitee.md | 4 +- en/react-native-community-checkbox.md | 89 ++++++++++++------------ zh-cn/react-native-community-checkbox.md | 88 +++++++++++------------ 3 files changed, 91 insertions(+), 90 deletions(-) diff --git a/en/model-gitee.md b/en/model-gitee.md index ff004fa1..c95021bf 100644 --- a/en/model-gitee.md +++ b/en/model-gitee.md @@ -156,7 +156,7 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4. Introducing xxx Component to ArkTS +### 2.4. Introducing xxx Component to ArkTS Find `function buildCustomRNComponent()`, which is usually located in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets`, and add the following code: @@ -225,7 +225,7 @@ Then build and run the code. Check the release version information in the release address of the third-party library: [\ Releases](https://github.com//releases) -Example: [@react-native-oh-tpl/react-native-safe-area-context Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) (Delete) +Example: [@react-native-ohos/react-native-safe-area-context Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) (Delete) **未修改原库代码的库使用下述描述**(Delete) diff --git a/en/react-native-community-checkbox.md b/en/react-native-community-checkbox.md index 48d1c975..70014fd7 100644 --- a/en/react-native-community-checkbox.md +++ b/en/react-native-community-checkbox.md @@ -1,39 +1,35 @@ -> Template version: v0.2.2 +> Template version: v0.3.0

@react-native-community/checkbox

-

- - Supported platforms - - - License - -

-> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-checkbox) +This project is based on [@react-native-community/checkbox](https://github.com/react-native-checkbox/react-native-checkbox). -## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/checkbox Releases](https://github.com/react-native-oh-library/react-native-checkbox/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +This third-party library has been migrated to Gitee and is now available for direct download from npm, the new package name is:`@react-native-ohos/checkbox`, The version correspondence details are as follows: -Go to the project directory and execute the following instruction: +| Version | Package Name | Repository | Release | +| ------------------------- | ------------------------------------------------- | ------------------ | -------------------------- | +| <= 0.5.16-0.1.0@deprecated | @react-native-oh-tpl/checkbox | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-checkbox) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-checkbox/releases) | +| >= 0.5.17 | @react-native-ohos/checkbox | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-checkbox) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-checkbox/releases) | +## 1. Installation and Usage +Go to the project directory and execute the following instruction: #### **npm** ```bash -npm install @react-native-oh-tpl/checkbox +npm install @react-native-ohos/checkbox ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/checkbox +yarn add @react-native-ohos/checkbox ``` @@ -67,27 +63,34 @@ export default function CheckBoxExample() { } ``` -## Link +## 2. Manual Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +This step provides guidance for manually configuring native dependencies. Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project +### 2.1. Overrides RN SDK + +To ensure the project relies on the same version of the RN SDK, you need to add an `overrides` field in the project's root `oh-package.json5` file, specifying the RN SDK version to be used. The replacement version can be a specific version number, a semver range, or a locally available HAR package or source directory. + +For more information about the purpose of this field, please refer to the [official documentation](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#en-us_topic_0000001792256137_overrides). ```json { - ... "overrides": { - "@rnoh/react-native-openharmony" : "./react_native_openharmony" + "@rnoh/react-native-openharmony": "^0.72.38" // ohpm version + // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // a locally available HAR package + // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // source code directory } } ``` -### 2. Introducing Native Code +### 2.2. Introducing Native Code Currently, two methods are available: +- Use the HAR file. +- Directly link to the source code。 Method 1 (recommended): Use the HAR file. @@ -98,8 +101,7 @@ Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "@react-native-oh-tpl/checkbox": "file:../../node_modules/@react-native-oh-tpl/checkbox/harmony/checkbox.har", + "@react-native-ohos/checkbox": "file:../../node_modules/@react-native-ohos/checkbox/harmony/checkbox.har", } ``` @@ -116,7 +118,7 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Configuring CMakeLists and Introducing CheckboxPackge +### 2.3. Configuring CMakeLists and Introducing CheckboxPackge Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: @@ -131,7 +133,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/checkbox/src/main/cpp" ./checkbox) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/checkbox/src/main/cpp" ./checkbox) # RNOH_END: manual_package_linking_1 add_library(rnoh_app SHARED @@ -165,28 +167,30 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4.Introducing RNCCheckBoxPackage Component to ArkTS -> [!TIP] Required for version `v0.5.16-0.1.0` and above +### 2.4. Introducing RNCCheckBoxPackage to ArkTS + +> [!TIP] Required for version `v0.5.17` and above Open `entry/src/main/ets/RNPackagesFactory.ts` and add: ```diff ... -+ import { RNCCheckBoxPackage } from '@react-native-oh-tpl/checkbox/ts'; ++ import { RNCCheckBoxPackage } from '@react-native-ohos/checkbox/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ + new RNCCheckBoxPackage(ctx) ]; } +``` -### 5.Introducing Checkbox Component to ArkTS +### 2.5. Introducing RNCCheckbox Component to ArkTS Find `function buildCustomRNComponent()`, which is usually located in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets`, and add the following code: ```diff ... -+ import { RNCCheckbox, CHECKBOX_TYPE } from "@react-native-oh-tpl/checkbox" ++ import { RNCCheckbox, CHECKBOX_TYPE } from "@react-native-ohos/checkbox" @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { @@ -215,7 +219,7 @@ const arkTsComponentNames: Array = [ ]; ``` -### 5.Running +### 2.6. Running Click the `sync` button in the upper right corner. @@ -228,17 +232,13 @@ ohpm install Then build and run the code. -## Constraints - -### Compatibility +## 3. Constraints -To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. +### 3.1. Compatibility -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/checkbox Releases](https://github.com/react-native-oh-library/react-native-checkbox/releases) +Check the release version information in the release address of the third-party library: [@react-native-ohos/checkbox Releases](https://gitee.com/openharmony-sig/rntpc_react-native-checkbox/releases) -## Properties - -> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. +## 4. Properties > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. @@ -266,7 +266,7 @@ Check the release version information in the release address of the third-party | `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 | | `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 | -## Static Methods +## 5. Static Methods > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. @@ -277,7 +277,7 @@ Check the release version information in the release address of the third-party | `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 | -## Known Issues +## 6. Known Issues - [x] Set the lineWidth attribute, which is used to control the line width of the check box. It is not implemented in HarmonyOS. [issue#3](https://github.com/react-native-oh-library/react-native-checkbox/issues/3) - [ ] Set the hideBox attribute, which is used to control the display and hiding of the check box. It is not implemented in HarmonyOS. [issue#4](https://github.com/react-native-oh-library/react-native-checkbox/issues/4) @@ -287,9 +287,8 @@ Check the release version information in the release address of the third-party - [ ] Set the onAnimationType attribute, which is used to control the animation type when selected. HarmonyOS is not implemented. [issue#7](https://github.com/react-native-oh-library/react-native-checkbox/issues/7) - [ ] Set the offAnimationType attribute. This attribute is used to control the animation type when deselecting. It is not implemented in HarmonyOS. [issue#8](https://github.com/react-native-oh-library/react-native-checkbox/issues/8) -## Others - -## License +## 7. Others +## 8. License -This project is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-checkbox/blob/harmony/LICENSE). +This project is licensed under [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_react-native-checkbox/blob/master/LICENSE). diff --git a/zh-cn/react-native-community-checkbox.md b/zh-cn/react-native-community-checkbox.md index 24edb7bd..faf10fe8 100644 --- a/zh-cn/react-native-community-checkbox.md +++ b/zh-cn/react-native-community-checkbox.md @@ -1,22 +1,20 @@ -> 模板版本：v0.2.2 +> 模板版本：v0.3.0

@react-native-community/checkbox

-

- - Supported platforms - - - License - -

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-checkbox) +本项目基于 [@react-native-community/checkbox](https://github.com/react-native-checkbox/react-native-checkbox) 开发。 + -## 安装与使用 +该第三方库的仓库已迁移至 Gitee，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/checkbox`，具体版本所属关系如下： -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/checkbox Releases](https://github.com/react-native-oh-library/react-native-checkbox/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +| Version | Package Name | Repository | Release | +| ------------------------- | ------------------------------------------------- | ------------------ | -------------------------- | +| <= 0.5.16-0.1.0@deprecated | @react-native-oh-tpl/checkbox | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-checkbox) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-checkbox/releases) | +| >= 0.5.17 | @react-native-ohos/checkbox | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-checkbox) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-checkbox/releases) | + +## 1. 安装与使用 进入到工程目录并输入以下命令： @@ -25,13 +23,13 @@ #### **npm** ```bash -npm install @react-native-oh-tpl/checkbox +npm install @react-native-ohos/checkbox ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/checkbox +yarn add @react-native-ohos/checkbox ``` @@ -65,29 +63,34 @@ export default function CheckBoxExample() { } ``` -## Link +## 2. Manual Link + +此步骤为手动配置原生依赖项的指导。 -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。 -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +### 2.1. Overrides RN SDK -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 `oh-package.json5` 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号，也可以是一个模糊版本，还可以是本地存在的 HAR 包或源码目录。 + +关于该字段的作用请阅读[官方说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#zh-cn_topic_0000001792256137_overrides) ```json { - ... "overrides": { - "@rnoh/react-native-openharmony" : "./react_native_openharmony" + "@rnoh/react-native-openharmony": "^0.72.38" // ohpm 在线版本 + // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径 + // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径 } } ``` -### 2.引入原生端代码 +### 2.2. 引入原生端代码 目前有两种方法： -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +- 通过 har 包引入； +- 直接链接源码。 方法一：通过 har 包引入（推荐） @@ -98,14 +101,13 @@ export default function CheckBoxExample() { ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "@react-native-oh-tpl/checkbox": "file:../../node_modules/@react-native-oh-tpl/checkbox/harmony/checkbox.har", + "@react-native-ohos/checkbox": "file:../../node_modules/@react-native-ohos/checkbox/harmony/checkbox.har", } ``` 点击右上角的 `sync` 按钮 -或者在终端执行： +或者在命令行终端执行： ```bash cd entry @@ -116,7 +118,7 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.配置 CMakeLists 和引入 CheckboxPackge +### 2.3. 配置 CMakeLists 和引入 CheckboxPackge 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -131,7 +133,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/checkbox/src/main/cpp" ./checkbox) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/checkbox/src/main/cpp" ./checkbox) # RNOH_END: manual_package_linking_1 add_library(rnoh_app SHARED @@ -165,14 +167,14 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4.在 ArkTs 侧引入 RNCCheckBoxPackage -> [!TIP] 版本v0.5.16-0.0.8及以上需要 +### 2.4. 在 ArkTs 侧引入 RNCCheckBoxPackage +> [!TIP] 版本 v0.5.17 及以上需要 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... -+ import { RNCCheckBoxPackage } from '@react-native-oh-tpl/checkbox/ts'; ++ import { RNCCheckBoxPackage } from '@react-native-ohos/checkbox/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -181,13 +183,13 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5.在 ArkTs 侧引入 Checkbox 组件 +### 2.5. 在 ArkTs 侧引入 RNCCheckbox 组件 找到 `function buildCustomComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： ```diff ... -+ import { RNCCheckbox, CHECKBOX_TYPE } from "@react-native-oh-tpl/checkbox" ++ import { RNCCheckbox, CHECKBOX_TYPE } from "@react-native-ohos/checkbox" @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { @@ -216,7 +218,7 @@ const arkTsComponentNames: Array = [ ]; ``` -### 5.运行 +### 2.6. 运行 点击右上角的 `sync` 按钮 @@ -229,15 +231,15 @@ ohpm install 然后编译、运行即可。 -## 约束与限制 +## 3. 约束与限制 -### 兼容性 +### 3.1. 兼容性 要使用此库，需要使用正确的 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) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-ohos/checkbox Releases](https://gitee.com/openharmony-sig/rntpc_react-native-checkbox/releases) -## 属性 +## 4. 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -265,7 +267,7 @@ ohpm install | `animationDuration` | The duration in seconds of the animations. Defaults to 0.5. | number | No | iOS | No | | `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 | | `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 | -## 静态方法 +## 5. 静态方法 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -276,7 +278,7 @@ ohpm install | `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 | -## 遗留问题 +## 6. 遗留问题 - [X] 设置lineWidth属性，该属性用来控制复选框的线条宽度，未实现HarmonyOS化: [issue#3](https://github.com/react-native-oh-library/react-native-checkbox/issues/3) - [ ] 设置hideBox属性，该属性用来控制复选框的显示与隐藏，未实现HarmonyOS化: [issue#4](https://github.com/react-native-oh-library/react-native-checkbox/issues/4) - [ ] 设置onTintColor属性，该属性用来控制复选框的选中时边框的颜色，未实现HarmonyOS化: [issue#5](https://github.com/react-native-oh-library/react-native-checkbox/issues/5) @@ -284,8 +286,8 @@ ohpm install - [ ] 设置animationDuration属性，该属性用来控制选中和取消选中的动画持续时间，未实现HarmonyOS化: [issue#6](https://github.com/react-native-oh-library/react-native-checkbox/issues/6) - [ ] 设置onAnimationType属性，该属性用来控制选中时的动画类型，未实现 HarmonyOS化: [issue#7](https://github.com/react-native-oh-library/react-native-checkbox/issues/7) - [ ] 设置offAnimationType属性，该属性用来控制取消选中时的动画类型，未实现 HarmonyOS化: [issue#8](https://github.com/react-native-oh-library/react-native-checkbox/issues/8) -## 其他 +## 7. 其他 -## 开源协议 +## 8. 开源协议 -本项目基于 [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://gitee.com/openharmony-sig/rntpc_react-native-checkbox/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file -- Gitee