diff --git a/zh-cn/react-native-community-progress-view.md b/zh-cn/react-native-community-progress-view.md index fd7b002303739b8e88222678c6e62d8ecc7835a0..22e7c4289eee6b236069e20086013f9c4c185679 100644 --- a/zh-cn/react-native-community-progress-view.md +++ b/zh-cn/react-native-community-progress-view.md @@ -1,4 +1,4 @@ -> 模板版本:v0.1.3 +> 模板版本:v0.2.1

@react-native-community/progress-view

@@ -45,11 +45,15 @@ yarn add @react-native-oh-tpl/progress-view@file:# ```js import { ProgressView } from "@react-native-community/progress-view"; -; +export default function ProgressViewExample() { + return ( + + ) +} ``` ## Link @@ -58,6 +62,17 @@ import { ProgressView } from "@react-native-community/progress-view"; 首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` +### 在工程根目录的 `oh-package.json` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + ### 引入原生端代码 目前有两种方法: @@ -65,7 +80,7 @@ import { ProgressView } from "@react-native-community/progress-view"; 1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法); 2. 直接链接源码。 -方法一:通过 har 包引入 +方法一:通过 har 包引入(推荐) > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 @@ -74,7 +89,6 @@ 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" } ``` @@ -100,14 +114,14 @@ 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 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-progress-view/src/main/cpp" ./progress-view) ++ add_subdirectory("${OH_MODULES}/rnoh-progress-view/src/main/cpp" ./progress-view) # RNOH_END: add_package_subdirectories add_library(rnoh_app SHARED @@ -119,7 +133,7 @@ target_link_libraries(rnoh_app PUBLIC rnoh) # RNOH_BEGIN: link_packages target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh-progress-view) ++ target_link_libraries(rnoh_app PUBLIC rnoh_progress_view) # RNOH_END: link_packages ``` @@ -147,7 +161,7 @@ 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 "rnoh-progress-view" @Builder function buildCustomComponent(ctx: ComponentBuilderContext) { @@ -158,11 +172,11 @@ function buildCustomComponent(ctx: ComponentBuilderContext) { 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 + }) + } ... @@ -191,6 +205,10 @@ ohpm install 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-library/progress-view Releases](https://github.com/react-native-oh-library/progress-view/releases) +本文档内容基于以下版本验证通过: + +RNOH: 0.72.26; SDK: HarmonyOS NEXT Developer Beta1 B.0.18; IDE: DevEco Studio 5.0.3.300; ROM: 3.0.0.22; + ## 属性 > [!tip] "鸿蒙支持"列为 yes 的 API 表示支持鸿蒙平台,并且效果对标"原库平台"列中的 ios 或 android 的效果。