From dea8cd4faf1e0ac1b14131004c4a84bf0c5222e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cleehom6666=E2=80=9D?= Date: Tue, 24 Dec 2024 14:34:45 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[##IBCI8E]=20=E4=BF=AE=E6=94=B9react-na?= =?UTF-8?q?tive-progress=5Fview=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: “leehom6666” --- en/react-native-community-progress-view.md | 87 ++++++++++-------- zh-cn/react-native-community-progress-view.md | 89 +++++++++++-------- 2 files changed, 105 insertions(+), 71 deletions(-) diff --git a/en/react-native-community-progress-view.md b/en/react-native-community-progress-view.md index 7a30e6f1..6d1e5454 100644 --- a/en/react-native-community-progress-view.md +++ b/en/react-native-community-progress-view.md @@ -1,22 +1,20 @@ -> Template version: v0.2.2 +> Template version: v0.3.0

@react-native-community/progress-view

-

- - Supported platforms - - - License - -

-> [!TIP] [GitHub address](https://github.com/react-native-oh-library/progress-view) +This project is based on [react-native-community/progress-view@1.4.2](https://github.com/react-native-progress-view/progress-view). + +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/react-native-progress-view`, The version correspondence details are as follows: + +| Version | Package Name | Repository | Release | +| ------------------------------ | ---------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| <= 1.4.2@deprecated | @react-native-oh-tpl/progress-view | [Github(deprecated)](https://github.com/react-native-oh-library/progress-view) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/progress-view/releases) | +| > 1.4.2 | @react-native-ohos/progress-view | [Gitee](https://gitee.com/openharmony-sig/rntpc_progress-view) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_progress-view/releases) | -## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/progress-view Releases](https://github.com/react-native-oh-library/progress-view/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. +## Installation and Usage Go to the project directory and execute the following instruction: @@ -27,13 +25,13 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash -npm install @react-native-oh-tpl/progress-view +npm install @react-native-ohos/progress-view ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/progress-view +yarn add @react-native-ohos/progress-view ``` @@ -56,24 +54,29 @@ export default function ProgressViewExample() { } ``` -## 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: @@ -86,7 +89,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/progress-view": "file:../../node_modules/@react-native-oh-tpl/progress-view/harmony/progress_view.har" + "@react-native-ohos/progress-view": "file:../../node_modules/@react-native-ohos/progress-view/harmony/progress_view.har" } ``` @@ -103,7 +106,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 ProgressViewPackage +### 2.3 Configuring CMakeLists and Introducing ProgressViewPackage Package Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: @@ -118,7 +121,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/progress-view/src/main/cpp" ./progress-view) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/progress-view/src/main/cpp" ./progress-view) # RNOH_BEGIN: manual_package_linking_1 add_library(rnoh_app SHARED @@ -152,14 +155,12 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4. Introducing ProgressViewPackage 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 { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" -+ import { RNCProgressView, PROGRESS_VIEW_TYPE } from "@react-native-oh-tpl/progress-view" ++ import { RNCProgressView, PROGRESS_VIEW_TYPE } from "@react-native-ohos/progress-view" @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { @@ -188,7 +189,23 @@ const arkTsComponentNames: Array = [ ]; ``` -### 5. Running + > **[!TIP] Version 1.4.3 and above requires.** + +Open the `entry/src/main/ets/RNPackagesFactory.ts`，file and add the following code: + +```diff + ... ++ import { ProgressViewPackage } from "@react-native-ohos/progress-view/ts"; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new ProgressViewPackage(ctx), + ]; +} +``` + +### 2.4 Running Click the `sync` button in the upper right corner. @@ -201,15 +218,15 @@ ohpm install Then build and run the code. -## Constraints +## 3. Constraints -### Compatibility +### 3.1 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. -Check the release version information in the release address of the third-party library: [@react-native-oh-library/progress-view Releases](https://github.com/react-native-oh-library/progress-view/releases) +Check the release version information in the release address of the third-party library: [@react-native-ohos/react-native-progress-view Releases](https://gitee.com/openharmony-sig/rntpc_progress-view/releases) -## Properties +## 4. Properties > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. @@ -225,12 +242,12 @@ Check the release version information in the release address of the third-party | `progressViewStyle` | The progress bar style. Network images only work on Windows. | enum('default', 'bar') | No | All | No | | `isIndeterminate` | Turns progress bar into an indeterminate progress bar. | bool | No | Windows | Partially | -## Known Issues +## 5. Known Issues - [ ] 原库部分接口在 HarmonyOS 中没有对应属性及接口处理相关逻辑，问题: [issue#1](https://github.com/react-native-oh-library/progress-view/issues/5) -## Others +## 6. Others -## License +## 7. License -This project is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/progress-view/blob/harmony/LICENSE). +This project is licensed under [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_progress-view/blob/master/LICENSE). diff --git a/zh-cn/react-native-community-progress-view.md b/zh-cn/react-native-community-progress-view.md index 009d304f..d674bfee 100644 --- a/zh-cn/react-native-community-progress-view.md +++ b/zh-cn/react-native-community-progress-view.md @@ -1,22 +1,20 @@ -> 模板版本：v0.2.2 +> 模板版本：v0.3.0

@react-native-community/progress-view

-

- - Supported platforms - - - License - -

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/progress-view) -## 安装与使用 +本项目基于 [react-native-community/progress-view@1.4.2](https://github.com/react-native-progress-view/progress-view) 开发。 + +该第三方库的仓库已迁移至 Gitee，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-progress-view`，具体版本所属关系如下： + +| Version | Package Name | Repository | Release | +| ------------------------------ | ---------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| <= 1.4.2@deprecated | @react-native-oh-tpl/progress-view | [Github(deprecated)](https://github.com/react-native-oh-library/progress-view) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/progress-view/releases) | +| > 1.4.2 | @react-native-ohos/progress-view | [Gitee](https://gitee.com/openharmony-sig/rntpc_progress-view) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_progress-view/releases) | -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/progress-view Releases](https://github.com/react-native-oh-library/progress-view/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 进入到工程目录并输入以下命令： @@ -25,13 +23,13 @@ #### **npm** ```bash -npm install @react-native-oh-tpl/progress-view +npm install @react-native-ohos/progress-view ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/progress-view +yarn add @react-native-ohos/progress-view ``` @@ -54,24 +52,29 @@ export default function ProgressViewExample() { } ``` -## Link +## 2. Manual Link + +此步骤为手动配置原生依赖项的指导。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。 -目前HarmonyOS暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +### 2.1 Overrides RN SDK -首先需要使用 DevEco Studio 打开项目里的HarmonyOS工程 `harmony` +为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 `harmony/oh-package.json5` 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号，也可以是一个模糊版本，还可以是本地存在的 HAR 包或源码目录。 -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +关于该字段的作用请阅读[官方说明](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 引入原生端代码 目前有两种方法： @@ -87,7 +90,7 @@ export default function ProgressViewExample() { ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/progress-view": "file:../../node_modules/@react-native-oh-tpl/progress-view/harmony/progress_view.har" + "@react-native-ohos/progress-view": "file:../../node_modules/@react-native-ohos/progress-view/harmony/progress_view.har" } ``` @@ -104,7 +107,7 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.配置 CMakeLists 和引入 ProgressViewPackage +### 2.3 配置 CMakeLists 和引入 ProgressViewPackage 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -119,7 +122,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/progress-view/src/main/cpp" ./progress-view) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/progress-view/src/main/cpp" ./progress-view) # RNOH_BEGIN: manual_package_linking_1 add_library(rnoh_app SHARED @@ -153,14 +156,12 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4.在 ArkTs 侧引入 ProgressViewPackage 组件 - 找到 **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 { RNCProgressView, PROGRESS_VIEW_TYPE } from "@react-native-oh-tpl/progress-view" ++ import { RNCProgressView, PROGRESS_VIEW_TYPE } from "@react-native-ohos/progress-view" @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { @@ -189,7 +190,23 @@ const arkTsComponentNames: Array = [ ]; ``` -### 5.运行 + > **[!TIP] 版本 1.4.3 及以上需要.** + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { ProgressViewPackage } from "@react-native-ohos/progress-view/ts"; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new ProgressViewPackage(ctx), + ]; +} +``` + +### 2.4 运行 点击右上角的 `sync` 按钮 @@ -202,15 +219,15 @@ ohpm install 然后编译、运行即可。 -## 约束与限制 +## 3. 约束与限制 -## 兼容性 +### 3.1 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/progress-view Releases](https://github.com/react-native-oh-library/progress-view/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-ohos/react-native-progress-view Releases](https://gitee.com/openharmony-sig/rntpc_progress-view/releases) -## 属性 +## 4. 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -226,13 +243,13 @@ ohpm install | `progressViewStyle` | The progress bar style. Network images only work on Windows. | enum('default', 'bar') | No | All | No | | `isIndeterminate` | Turns progress bar into an indeterminate progress bar. | bool | No | Windows | Partially | -## 遗留问题 +## 5. 遗留问题 - [ ] 原库部分接口在 HarmonyOS 中没有对应属性及接口处理相关逻辑，问题: [issue#1](https://github.com/react-native-oh-library/progress-view/issues/5) -## 其他 +## 6. 其他 -## 开源协议 +## 7. 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/progress-view/blob/harmony/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_progress-view/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee