From e9b1f372c93741f4b14d984e6dc17eaf65669f35 Mon Sep 17 00:00:00 2001 From: likang Date: Fri, 5 Jan 2024 14:30:24 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I8TVIL]=20=E6=B7=BB=E5=8A=A0pro?= =?UTF-8?q?gress-view=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vmall/react-native-progress-view.md | 217 ++++++++++++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 vmall/react-native-progress-view.md diff --git a/vmall/react-native-progress-view.md b/vmall/react-native-progress-view.md new file mode 100644 index 00000000..754a90da --- /dev/null +++ b/vmall/react-native-progress-view.md @@ -0,0 +1,217 @@ +> 模板版本：v0.1.2 + +

+

@react-native-community/progress-view

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/react-native-oh-library/progress-view) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **yarn** + +```bash +yarn add @react-native-community/progress-view@npm:@react-native-oh-library/progress-view +``` + +#### **npm** + +```bash +npm install @react-native-community/progress-view@npm:@react-native-oh-library/progress-view +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import {ProgressView} from '@react-native-community/progress-view'; + + +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-progress-view": "file:../../node_modules/@react-native-community/progress-view/harmony/progress_view.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-progress-view": "file:../../node_modules/@react-native-community/progress-view/harmony/progress-view" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 ProgressViewPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +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(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) +# RNOH_END: add_package_subdirectories + +add_library(rnoh_app SHARED + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) + +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) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "ProgressViewPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 ProgressViewPackage 组件 + +打开 `entry/src/main/ets/pages/index.ets`，添加： + +```diff +... +import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" ++ import { RNCProgressView, PROGRESS_VIEW_TYPE } from "rnoh-picker" + +@Builder +function CustomComponentBuilder(ctx: ComponentBuilderContext) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { + SampleView({ + ctx: ctx.rnohContext, + tag: ctx.tag, + buildCustomComponent: CustomComponentBuilder + }) + } ++ else if (ctx.componentName === PROGRESS_VIEW_TYPE) { ++ RNCProgressView({ ++ ctx: ctx.rnohContext, ++ tag: ctx.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } + ... +} +... +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +## 兼容性 + +要使用此库，需要使用正确的 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) + +## 属性 + +> [!tip] "鸿蒙支持"列为 yes 的 API 表示支持鸿蒙平台，并且效果对标"原库平台"列中的 ios 或 android 的效果。 + +> [!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 | + +## 遗留问题 + +- [ ] 部分接口，未适配 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/progress-view/blob/harmony/LICENSE) ，请自由地享受和参与开源。 -- Gitee From 32677d6cb8ad4b470a9e8990b0bebc274c166ff7 Mon Sep 17 00:00:00 2001 From: likang Date: Fri, 5 Jan 2024 16:14:48 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I8TVIL]=20progress-view?= =?UTF-8?q?=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-native-progress-view.md | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) rename {vmall => zh-cn}/react-native-progress-view.md (89%) diff --git a/vmall/react-native-progress-view.md b/zh-cn/react-native-progress-view.md similarity index 89% rename from vmall/react-native-progress-view.md rename to zh-cn/react-native-progress-view.md index 754a90da..1e4e9ef5 100644 --- a/vmall/react-native-progress-view.md +++ b/zh-cn/react-native-progress-view.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.0.1

@react-native-community/progress-view

@@ -12,14 +12,23 @@

-> [!tip] [Github 地址](https://github.com/react-native-oh-library/progress-view) - ## 安装与使用 +> [!tip] 目前部分 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 + +在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 + +```bash +@react-native-oh-library:registry=https://npm.pkg.github.com +//npm.pkg.github.com/:_authToken=TOKEN +``` + 进入到工程目录并输入以下命令： +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-svg/releases)中获取库 tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash @@ -186,8 +195,6 @@ ohpm install 然后编译、运行即可。 -## 约束与限制 - ## 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 @@ -196,10 +203,6 @@ ohpm install ## 属性 -> [!tip] "鸿蒙支持"列为 yes 的 API 表示支持鸿蒙平台，并且效果对标"原库平台"列中的 ios 或 android 的效果。 - -> [!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 | -- Gitee