diff --git a/en/react-native-ui-lib.md b/en/react-native-ui-lib.md index 59aa9717ddf6c4fad995ee33b81ce3757fdb699b..245b9c547fbf29a05dab7b52c83366956d31780a 100644 --- a/en/react-native-ui-lib.md +++ b/en/react-native-ui-lib.md @@ -1,28 +1,19 @@ -Template version: v0.2.2 +Template version: v0.4.0

react-native-ui-lib

-

- - Supported platforms - - - License - -

- -> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-ui-lib) +This project is developed based on [react-native-ui-lib](https://github.com/wix/react-native-ui-lib). -| Version | Post Information | Supports RN version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 7.29.1 | [@react-native-oh-tpl/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases) | 0.72 | -| 7.43.1 | [@react-native-ohos/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases) | 0.77 | +The repository for this third-party library has been migrated to Gitcode and supports direct download from npm. The new package name is: @react-native-ohos/react-native-ui-lib. The version relationships are as follows: +| Library Name | Version | Post Information | Supports RN version | Autolink | Compile API Version | Community Baseline Version | npm Address | +| ------------ | ------------ | ------------------------------ | ------------- | ------------- |------------------------ | ------------- | ------------- | +| @react-native-ohos/react-native-ui-lib | ~ 7.43.1 | [Github Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases) | 0.77.* | 否 | API12+ | 7.43.0 | [Npm Address](https://www.npmjs.com/package/@react-native-ohos/react-native-ui-lib) | +| @react-native-ohos/react-native-ui-lib | ~ 7.29.2 | [Gitcode Releases](https://gitcode.com/OpenHarmony-RN/rntpc_react-native-ui-lib/releases) | 0.72.* | 是 | API12+ | 7.29.0 | [Npm Address](https://www.npmjs.com/package/@react-native-ohos/react-native-ui-lib) | +| @react-native-oh-tpl/react-native-ui-lib | <= 7.29.1-0.0.5@deprecated | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-ui-lib/releases) | 0.72.* | 否 | API12+ | 7.29.0 | [Npm Address](https://www.npmjs.com/package/@react-native-oh-tpl/react-native-ui-lib) | -## Installation and Usage - -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/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. +## 1. Installation and Usage The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-reanimated、@react-native-oh-tpl/react-native-gesture-handler. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. @@ -42,20 +33,12 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash -# 0.72 -npm install @react-native-oh-tpl/react-native-ui-lib - -# 0.77 npm install @react-native-ohos/react-native-ui-lib ``` #### **yarn** ```bash -# 0.72 -yarn add @react-native-oh-tpl/react-native-ui-lib - -# 0.77 yarn add @react-native-ohos/react-native-ui-lib ``` @@ -137,13 +120,23 @@ class MyScreen extends Component { If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md). -## Link +## 2. Link + +| | Is supported autolink | Supported RN Version | +|--------------------------------------|-----------------------|----------------------| +| ~7.43.1 | No | 0.77 | +| ~7.29.2 | Yes | 0.72 | +| <= 7.29.1-0.0.5@deprecated | No | 0.72 | + +Using AutoLink need to be configured according to this document, Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +If the version you use supports Autolink and the project has been connected to Autolink, skip the ManualLink configuration. +
+ ManualLink: this step is a guide to manually configure 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. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -154,7 +147,7 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. } ``` -### 2. Introducing Native Code +### 2.2 Introducing Native Code Currently, two methods are available: @@ -164,17 +157,6 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: -- 0.72 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-ui-lib": "file:../../node_modules/@react-native-oh-tpl/react-native-ui-lib/harmony/ui_lib.har" - } -``` - -- 0.77 - ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -195,7 +177,9 @@ 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 UiLibPackage +### 2.3. Configuring CMakeLists and Introducing UiLibPackage + +> If you are using version <= 7.29.1-0.0.5, please skip this chapter. Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: @@ -218,10 +202,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -# 0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-ui-lib/src/main/cpp" ./ui-lib) -# 0.77 + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-ui-lib/src/main/cpp" ./ui-lib) # RNOH_END: manual_package_linking_1 @@ -259,16 +240,12 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4. Introducing HighlighterView Component to ArkTS +### 2.4. Introducing HighlighterView 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 ... -// 0.72 -+ import { HighlighterView } from "@react-native-oh-tpl/react-native-ui-lib"; - -// 0.77 + import { HighlighterView } from "@react-native-ohos/react-native-ui-lib"; @Builder @@ -298,16 +275,12 @@ const arkTsComponentNames: Array = [ ]; ``` -### 5. Introducing UiLibPackage to ArkTS +### 2.5. Introducing UiLibPackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... -// 0.72 -+ import { UiLibPackage } from '@react-native-oh-tpl/react-native-ui-lib/ts'; - -// 0.77 + import { UiLibPackage } from '@react-native-ohos/react-native-ui-lib/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -317,8 +290,9 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { ]; } ``` +
-### 6. Running +### 2.6. Running Click the `sync` button in the upper right corner. @@ -331,16 +305,19 @@ ohpm install Then build and run the code. -## Constraints +## 3. Constraints + +### 3.1. Compatibility -### Compatibility +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. -The content of this document has been validated based on the following version: +Verified in the following versions. -1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; -## Components +## 4. Components For details, see [react-native-ui-lib docs](https://wix.github.io/react-native-ui-lib/docs/getting-started/setup) @@ -1646,7 +1623,7 @@ For details, see [react-native-ui-lib docs](https://wix.github.io/react-native-u | timesKey | A key prefix for the duplicated SkeletonViews | string | no | iOS/Android | yes | | width | The width of the skeleton view | number | no | iOS/Android | yes | -## API +## 5. API > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. @@ -1680,13 +1657,13 @@ For details, see [react-native-ui-lib docs](https://wix.github.io/react-native-u | ---------------- | ----------------------- | ----------------------------------- | -------- | ----------- | ----------------- | | loadTypographies | Set space size variable | ({ [key: string]: number }) => void | no | iOS/Android | yes | -## Known Issues +## 6. Known Issues - [ ] In the **KeyboardTrackingView** component, the child input field stays above the keyboard, but the click event position is incorrect: [issue#4](https://github.com/react-native-oh-library/react-native-ui-lib/issues/4). - [ ] The native component **KeyboardAccessoryView** is not implemented for switching to the custom keyboard: [issue#3](https://github.com/react-native-oh-library/react-native-ui-lib/issues/3). -## Others +## 7. Others -## License +## 8. License This project is licensed under [The MIT License (MIT)](https://github.com/wix/react-native-ui-lib/blob/master/LICENSE). diff --git a/zh-cn/react-native-ui-lib.md b/zh-cn/react-native-ui-lib.md index 6be3f0eb2a86f5053fddaab74f84d86fbc5d6062..1c19a3fa35c1ec1a814d30b3ce82dd0e9c8b851e 100644 --- a/zh-cn/react-native-ui-lib.md +++ b/zh-cn/react-native-ui-lib.md @@ -1,32 +1,19 @@ -模板版本：v0.2.2 +模板版本：v0.4.0

react-native-ui-lib

-

- - Supported platforms - - - License - -

- - - - -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-ui-lib) +本项目基于 [react-native-ui-lib](https://github.com/wix/react-native-ui-lib) 开发。 -## 安装与使用 +该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-ui-lib 版本所属关系如下： +| 三方库名称 | 三方库版本 | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | npm地址 | +| ------------ | ------------ | ------------------------------ | ------------- | ------------- |------------------------ | ------------- | ------------- | +| @react-native-ohos/react-native-ui-lib | ~ 7.43.1 | [Github Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases) | 0.77.* | 否 | API12+ | 7.43.0 | [Npm Address](https://www.npmjs.com/package/@react-native-ohos/react-native-ui-lib) | +| @react-native-ohos/react-native-ui-lib | ~ 7.29.2 | [Gitcode Releases](https://gitcode.com/OpenHarmony-RN/rntpc_react-native-ui-lib/releases) | 0.72.* | 是 | API12+ | 7.29.0 | [Npm Address](https://www.npmjs.com/package/@react-native-ohos/react-native-ui-lib) | +| @react-native-oh-tpl/react-native-ui-lib | <= 7.29.1-0.0.5@deprecated | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-ui-lib/releases) | 0.72.* | 否 | API12+ | 7.29.0 | [Npm Address](https://www.npmjs.com/package/@react-native-oh-tpl/react-native-ui-lib) | -请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 7.29.1 | [@react-native-oh-tpl/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases) | 0.72 | -| 7.43.1 | [@react-native-ohos/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases) | 0.77 | - -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 1. 安装与使用 本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-reanimated和 @react-native-oh-tpl/react-native-gesture-handler的原生端代码，如已在 HarmonyOS 工程中引入过这些库，则无需再次引入，可跳过本章节步骤，直接使用。 @@ -46,20 +33,12 @@ #### **npm** ```bash -# 0.72 -npm install @react-native-oh-tpl/react-native-ui-lib - -# 0.77 npm install @react-native-ohos/react-native-ui-lib ``` #### **yarn** ```bash -# 0.72 -yarn add @react-native-oh-tpl/react-native-ui-lib - -# 0.77 yarn add @react-native-ohos/react-native-ui-lib ``` @@ -134,13 +113,23 @@ class MyScreen extends Component { 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 -## Link +## 2. Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +| | 是否支持autolink | RN框架版本 | +|--------------------------------------|-----------------------|----------------------| +| ~7.43.1 | No | 0.77 | +| ~7.29.2 | Yes | 0.72 | +| <= 7.29.1-0.0.5@deprecated | No | 0.72 | + +使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。 +
+ ManualLink: 此步骤为手动配置原生依赖项的指导 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +### 2.1. 在工程根目录的 `oh-package.json5` 添加 overrides 字段 ```json { @@ -151,7 +140,7 @@ class MyScreen extends Component { } ``` -### 2.引入原生端代码 +### 2.2 引入原生端代码 目前有两种方法： @@ -164,17 +153,6 @@ class MyScreen extends Component { 打开 `entry/oh-package.json5`，添加以下依赖 -- 0.72 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-ui-lib": "file:../../node_modules/@react-native-oh-tpl/react-native-ui-lib/harmony/ui_lib.har" - } -``` - -- 0.77 - ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -195,7 +173,9 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.配置 CMakeLists 和引入 UiLibPackage +### 2.3. 配置 CMakeLists 和引入 UiLibPackage + +> 若使用的是 <= 7.29.1-0.0.5 版本，请跳过本章。 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -219,10 +199,6 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -# 0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-ui-lib/src/main/cpp" ./ui-lib) - -# 0.77 + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-ui-lib/src/main/cpp" ./ui-lib) # RNOH_END: manual_package_linking_1 @@ -261,16 +237,12 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4.在 ArkTs 侧引入 HighlighterView组件 +### 2.4. 在 ArkTs 侧引入 HighlighterView组件 找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： ```diff ... -// 0.72 -+ import { HighlighterView } from "@react-native-oh-tpl/react-native-ui-lib"; - -// 0.77 + import { HighlighterView } from "@react-native-ohos/react-native-ui-lib"; @Builder @@ -300,16 +272,12 @@ const arkTsComponentNames: Array = [ ]; ``` -### 5.在 ArkTs 侧引入 UiLibPackage +### 2.5. 在 ArkTs 侧引入 UiLibPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... -// 0.72 -+ import { UiLibPackage } from '@react-native-oh-tpl/react-native-ui-lib/ts'; - -// 0.77 + import { UiLibPackage } from '@react-native-ohos/react-native-ui-lib/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -319,8 +287,9 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { ]; } ``` +
-### 6.运行 +### 2.6. 运行 点击右上角的 `sync` 按钮 @@ -333,16 +302,19 @@ ohpm install 然后编译、运行即可。 -## 约束与限制 +## 3. 约束与限制 + +### 3.1. 兼容性 -### 兼容性 +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -本文档内容基于以下版本验证通过： +在以下版本验证通过： -1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; -## 组件 +## 4. 组件 详细请查看 [react-native-ui-lib的文档介绍](https://wix.github.io/react-native-ui-lib/docs/getting-started/setup) @@ -1685,7 +1657,7 @@ ohpm install | dividerWidth | 段之间分隔线的宽度 | number | no | iOS/Android | yes | | dividerColor | 段之间分隔线的颜色 | ColorValue | no | iOS/Android | yes | -## API +## 5. API > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -1719,13 +1691,13 @@ ohpm install | ---------------- | ----------------------- | ----------------------------------- | -------- | ----------- | ----------------- | | loadSpacings | 设置空间大小变量 | ({ [key: string]: number }) => void | no | iOS/Android | yes | -## 遗留问题 +## 6. 遗留问题 - [ ] KeyboardTrackingView组件，将输入框子节点保持在键盘上方后点击事件位置异常: [issue#4](https://github.com/react-native-oh-library/react-native-ui-lib/issues/4) - [ ] 原生组件KeyboardAccessoryView切换自定义键盘未实现: [issue#3](https://github.com/react-native-oh-library/react-native-ui-lib/issues/3) -## 其他 +## 7. 其他 -## 开源协议 +## 8. 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/wix/react-native-ui-lib/blob/master/LICENSE) ，请自由地享受和参与开源。