From b99a3abce3ce079f9de21d0ed8bc323111d3be92 Mon Sep 17 00:00:00 2001 From: ddwwwww <18829031738@163.com> Date: Sat, 29 Jun 2024 11:50:05 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#IA98FN]=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9react-native-community-progress-view=E6=8C=87=E5=AF=BC?= =?UTF-8?q?=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-community-progress-view.md | 100 +++++++++++------- 1 file changed, 63 insertions(+), 37 deletions(-) diff --git a/zh-cn/react-native-community-progress-view.md b/zh-cn/react-native-community-progress-view.md index 0569f7a8..4ee1cd5c 100644 --- a/zh-cn/react-native-community-progress-view.md +++ b/zh-cn/react-native-community-progress-view.md @@ -1,5 +1,5 @@ -> 模板版本：v0.1.3 +> 模板版本：v0.2.2

@react-native-community/progress-view

@@ -8,8 +8,8 @@ Supported platforms - - License + + License

@@ -46,18 +46,33 @@ yarn add @react-native-oh-tpl/progress-view@file:# ```js import { ProgressView } from "@react-native-community/progress-view"; -; +export default function ProgressViewExample() { + return ( + + ) +} ``` ## Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +目前HarmonyOS暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的HarmonyOS工程 `harmony` -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +### 在工程根目录的 `oh-package.json` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` ### 引入原生端代码 @@ -66,7 +81,7 @@ import { ProgressView } from "@react-native-community/progress-view"; 1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； 2. 直接链接源码。 -方法一：通过 har 包引入 +方法一：通过 har 包引入（推荐） > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 @@ -75,8 +90,7 @@ import { ProgressView } from "@react-native-community/progress-view"; ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-progress-view": "file:../../node_modules/@react-native-oh-tpl/progress-view/harmony/progress_view.har" + "@react-native-oh-tpl/progress-view": "file:../../node_modules/@react-native-oh-tpl/progress-view/harmony/progress_view.har" } ``` @@ -101,15 +115,15 @@ ohpm install 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(OH_MODULES "${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 +# RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-progress-view/src/main/cpp" ./progress-view) -# RNOH_END: add_package_subdirectories ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/progress-view/src/main/cpp" ./progress-view) +# RNOH_BEGIN: manual_package_linking_1 add_library(rnoh_app SHARED "./PackageProvider.cpp" @@ -118,16 +132,17 @@ add_library(rnoh_app SHARED target_link_libraries(rnoh_app PUBLIC rnoh) -# RNOH_BEGIN: link_packages +# RNOH_BEGIN: manual_package_linking_2 target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh-progress-view) -# RNOH_END: link_packages ++ target_link_libraries(rnoh_app PUBLIC rnoh_progress_view) +# RNOH_BEGIN: manual_package_linking_2 ``` 打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： ```diff #include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" #include "SamplePackage.h" + #include "ProgressViewPackage.h" @@ -148,29 +163,36 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" -+ import { RNCProgressView, PROGRESS_VIEW_TYPE } from "rnoh-picker" ++ import { RNCProgressView, PROGRESS_VIEW_TYPE } from "@react-native-oh-tpl/progress-view" @Builder function buildCustomComponent(ctx: ComponentBuilderContext) { - if (ctx.componentName === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnComponentContext, - tag: ctx.tag, - buildCustomComponent: buildCustomComponent - }) - } -+ else if (ctx.componentName === PROGRESS_VIEW_TYPE) { +... ++ if (ctx.componentName === PROGRESS_VIEW_TYPE) { + RNCProgressView({ + ctx: ctx.rnComponentContext, + tag: ctx.tag, -+ buildCustomComponent: buildCustomComponent ++ buildCustomComponent: buildCustomRNComponent + }) + } - ... +... } ... ``` +> [!TIP] 本库使用了混合方案，需要添加组件名。 + +在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名 + +```diff +const arkTsComponentNames: Array = [ + SampleView.NAME, + GeneratedSampleView.NAME, + PropsDisplayer.NAME, ++ PROGRESS_VIEW_TYPE + ]; +``` + ### 运行 点击右上角的 `sync` 按钮 @@ -194,19 +216,23 @@ ohpm install ## 属性 -> [!tip] " HarmonyOS 支持"列为 yes 的 API 表示支持 HarmonyOS 平台，并且效果对标"原库平台"列中的 ios 或 android 的效果。 +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | ------------------------------------------ | ------ | -------- | -------- | ----------------- | -| `progress` | The progress value (between 0 and 1). | number | No | All | yes | -| `progressTintColor` | The tint color of the progress bar itself. | string | No | All | yes | -| `trackTintColor` | The tint color of the progress bar track. | string | No | All | yes | +| `progress` | The progress value (between 0 and 1). | number | No | All | Yes | +| `progressTintColor` | The tint color of the progress bar itself. | string | No | All | Yes | +| `trackTintColor` | The tint color of the progress bar track. | string | No | All | Yes | +| `progressImage` | A stretchable image to display as the progress bar. | Image.propTypes.source | No | All | No | +| `trackImage` | A stretchable image to display behind the progress bar. Network images only work on Windows.| Image.propTypes.source | No | All | No | +| `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 | ## 遗留问题 -- [ ] 部分接口，未适配 +- 原库部分接口在 HarmonyOS 中没有对应属性及接口处理相关逻辑，问题: [issue#1](https://github.com/react-native-oh-library/progress-view/issues/5) ## 其他 @@ -214,4 +240,4 @@ ohpm install 本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/progress-view/blob/harmony/LICENSE) ，请自由地享受和参与开源。 - \ No newline at end of file + -- Gitee