From 9bc9a3cdba20d1d1b9be52ee396ad8e3701b9df0 Mon Sep 17 00:00:00 2001 From: dengpeng Date: Tue, 9 Jan 2024 09:46:45 +0800 Subject: [PATCH 1/4] =?UTF-8?q?[Issues:=20#I8UCYF]=20=E6=9B=B4=E6=96=B0pro?= =?UTF-8?q?gress-bar-android?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/progress-bar-android.md | 223 +++++++++++++++++++++++++++++++++++ 1 file changed, 223 insertions(+) create mode 100644 1224/progress-bar-android.md diff --git a/1224/progress-bar-android.md b/1224/progress-bar-android.md new file mode 100644 index 00000000..7ca954c7 --- /dev/null +++ b/1224/progress-bar-android.md @@ -0,0 +1,223 @@ +> 模板版本：v0.1.2 + +

+

@react-native-community/progress-bar-android

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/react-native-oh-library/progress-bar-android) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **yarn** + +```bash +yarn add @react-native-community/progress-bar-android@npm:@react-native-oh-library/progress-bar-android +``` + +#### **npm** + +```bash +npm install @react-native-community/progress-bar-android@npm:@react-native-oh-library/progress-bar-android +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js + import {ProgressBar} from '@react-native-community/progress-bar-android'; + + + +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-progress-bar-android": "file:../../node_modules/@react-native-community/progress-bar-android/harmony/progress_bar_android.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-progress-bar-android": "file:../../node_modules/@react-native-community/progress-bar-android/harmony/progress_bar_android" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 ProgressBarAndroidPackage + +打开 `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-bar-android/src/main/cpp" ./progress-bar-android) +# 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_bar_android) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "ProgressBarAndroidPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 ProgressBarAndroid 组件 + +打开 `entry/src/main/ets/pages/index.ets`，添加： + +```diff +import { + RNApp, + ComponentBuilderContext, + RNAbility, + AnyJSBundleProvider, + MetroJSBundleProvider, + ResourceJSBundleProvider, +} from 'rnoh' +import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" +import { createRNPackages } from '../RNPackagesFactory' ++ import { ProgressBarAndroid,PROGRESS_BAR_TYPE } from "rnoh-progress-bar-android" + +@Builder +function CustomComponentBuilder(ctx: ComponentBuilderContext) { + if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { + SampleView({ + ctx: ctx.rnohContext, + tag: ctx.descriptor.tag, + buildCustomComponent: CustomComponentBuilder + }) + } ++ else if (ctx.descriptor.type == PROGRESS_BAR_TYPE){ ++ ProgressBarAndroid({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag ++ }) ++ } + ... +} +... +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/progress-bar-android Releases](https://github.com/react-native-oh-library/progress-bar-android/releases) + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +Inherits [View Props](https://reactnative.dev/docs/view#props). + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | +| `animating` | Whether to show the ProgressBar (true, the default) or hide it (false). | bool | No | Android | yes | +| `color` | Color of the progress bar. | [color](https://reactnative.dev/docs/colors) | No | Android | yes | +| `indeterminate` | If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal, and requires a `progress` value. | indeterminateType | No | Android | yes | +| `progress` | The progress value (between 0 and 1). | number | No | Android | yes | +| `styleAttr` | Style of the ProgressBar. | One of:
Horizontal
Normal (default)
Small
Large
Inverse
SmallInverse
LargeInverse | No | Android | yes | + +## 遗留问题 + +- [ ] styleAttr 为 Horizontal 时无法铺满全屏 [issues#4](https://github.com/react-native-oh-library/progress-bar-android/issues/4)。 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-progress-view/progress-bar-android/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee From de4f925ab19476520f4742643746d6a264432437 Mon Sep 17 00:00:00 2001 From: dengpeng Date: Tue, 9 Jan 2024 14:47:23 +0800 Subject: [PATCH 2/4] =?UTF-8?q?[Issues:=20#I8UCYF]=20=E6=9B=B4=E6=96=B0pro?= =?UTF-8?q?gress-bar-android=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/progress-bar-android.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/1224/progress-bar-android.md b/1224/progress-bar-android.md index 7ca954c7..ff32ad6a 100644 --- a/1224/progress-bar-android.md +++ b/1224/progress-bar-android.md @@ -20,6 +20,8 @@ +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/progress-bar-android/releases)中获取库 tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash @@ -159,17 +161,18 @@ import { createRNPackages } from '../RNPackagesFactory' @Builder function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { SampleView({ ctx: ctx.rnohContext, - tag: ctx.descriptor.tag, + tag: ctx.tag, buildCustomComponent: CustomComponentBuilder }) } -+ else if (ctx.descriptor.type == PROGRESS_BAR_TYPE){ ++ else if (ctx.componentName == PROGRESS_BAR_TYPE){ + ProgressBarAndroid({ + ctx: ctx.rnohContext, -+ tag: ctx.descriptor.tag ++ tag: ctx.tag, ++ buildCustomComponent: CustomComponentBuilder + }) + } ... -- Gitee From b3b6abe341995c2c9071b2a17c3fcc88391f2e3c Mon Sep 17 00:00:00 2001 From: dengpeng Date: Tue, 9 Jan 2024 16:00:22 +0800 Subject: [PATCH 3/4] =?UTF-8?q?[Issues:=20#I8UCYF]=20=E6=9B=B4=E6=96=B0pro?= =?UTF-8?q?gress-bar-android=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/progress-bar-android.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/1224/progress-bar-android.md b/1224/progress-bar-android.md index ff32ad6a..48b5d4d1 100644 --- a/1224/progress-bar-android.md +++ b/1224/progress-bar-android.md @@ -20,18 +20,16 @@ -**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/progress-bar-android/releases)中获取库 tgz，通过使用本地依赖来安装本库。** - #### **yarn** ```bash -yarn add @react-native-community/progress-bar-android@npm:@react-native-oh-library/progress-bar-android +yarn add @react-native-oh-library/progress-bar-android ``` #### **npm** ```bash -npm install @react-native-community/progress-bar-android@npm:@react-native-oh-library/progress-bar-android +npm install @react-native-oh-library/progress-bar-android ``` @@ -64,7 +62,7 @@ npm install @react-native-community/progress-bar-android@npm:@react-native-oh-li ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-progress-bar-android": "file:../../node_modules/@react-native-community/progress-bar-android/harmony/progress_bar_android.har" + "rnoh-progress-bar-android": "file:../../node_modules/@react-native-oh-library/progress-bar-android/harmony/progress_bar_android.har" } ``` @@ -83,7 +81,7 @@ ohpm install ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-progress-bar-android": "file:../../node_modules/@react-native-community/progress-bar-android/harmony/progress_bar_android" + "rnoh-progress-bar-android": "file:../../node_modules/@react-native-oh-library/progress-bar-android/harmony/progress_bar_android" } ``` -- Gitee From 82a391103b21887c2a2b3ada92b9194606ce297c Mon Sep 17 00:00:00 2001 From: dengpeng Date: Tue, 9 Jan 2024 17:07:32 +0800 Subject: [PATCH 4/4] =?UTF-8?q?[Issues:=20#I8UCYF]=20=E6=9B=B4=E6=96=B0pro?= =?UTF-8?q?gress-bar-android=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/progress-bar-android.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/1224/progress-bar-android.md b/1224/progress-bar-android.md index 48b5d4d1..705a0ee8 100644 --- a/1224/progress-bar-android.md +++ b/1224/progress-bar-android.md @@ -12,7 +12,7 @@

-> [!tip] [Github 地址](https://github.com/react-native-oh-library/progress-bar-android) +> [!tip] [Github 地址](https://github.com/react-native-oh-tpl/progress-bar-android) ## 安装与使用 @@ -23,13 +23,13 @@ #### **yarn** ```bash -yarn add @react-native-oh-library/progress-bar-android +yarn add @react-native-oh-tpl/progress-bar-android ``` #### **npm** ```bash -npm install @react-native-oh-library/progress-bar-android +npm install @react-native-oh-tpl/progress-bar-android ``` @@ -62,7 +62,7 @@ npm install @react-native-oh-library/progress-bar-android ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-progress-bar-android": "file:../../node_modules/@react-native-oh-library/progress-bar-android/harmony/progress_bar_android.har" + "rnoh-progress-bar-android": "file:../../node_modules/@react-native-oh-tpl/progress-bar-android/harmony/progress_bar_android.har" } ``` @@ -81,7 +81,7 @@ ohpm install ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-progress-bar-android": "file:../../node_modules/@react-native-oh-library/progress-bar-android/harmony/progress_bar_android" + "rnoh-progress-bar-android": "file:../../node_modules/@react-native-oh-tpl/progress-bar-android/harmony/progress_bar_android" } ``` -- Gitee