diff --git a/zh-cn/react-native-community-progress-view.md b/zh-cn/react-native-community-progress-view.md index 0569f7a8498974d3365a669637573f385284c5c5..12c956573c9baa65003e102bcc7b9d5ca76c5c07 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

@@ -46,18 +46,37 @@ yarn add @react-native-oh-tpl/progress-view@file:# ```js import { ProgressView } from "@react-native-community/progress-view"; -; +export default function ProgressViewExample() { + return ( + + ) +} ``` +## 使用 Codegen + +本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/codegen.md)。 + ## 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 +85,7 @@ import { ProgressView } from "@react-native-community/progress-view"; 1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法); 2. 直接链接源码。 -方法一:通过 har 包引入 +方法一:通过 har 包引入(推荐) > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 @@ -75,8 +94,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 +119,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 +136,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,25 +167,19 @@ 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 + }) + } - ... +... } ... ``` @@ -194,7 +207,7 @@ ohpm install ## 属性 -> [!tip] " HarmonyOS 支持"列为 yes 的 API 表示支持 HarmonyOS 平台,并且效果对标"原库平台"列中的 ios 或 android 的效果。 +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 @@ -206,7 +219,7 @@ ohpm install ## 遗留问题 -- [ ] 部分接口,未适配 +- [ ] 部分接口未适配 ## 其他 @@ -214,4 +227,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 +