From 8c9fb44ab50ffaea36c254dfd43ef413fcabe4c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E5=98=89=E8=AF=9A?= <425765923@qq.com> Date: Mon, 27 Nov 2023 11:40:03 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I8IYLL]=20=E6=96=B0=E5=A2=9Eprogres?= =?UTF-8?q?s-bar-android=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 19 +-- _sidebar.md | 1 + zh-cn/progress-bar-android.md | 220 ++++++++++++++++++++++++++++++++++ 3 files changed, 231 insertions(+), 9 deletions(-) create mode 100644 zh-cn/progress-bar-android.md diff --git a/README.md b/README.md index a8e6275b..c66fc106 100644 --- a/README.md +++ b/README.md @@ -8,15 +8,16 @@ ## RNOH 三方库总览 -| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | 已发布的最新版本 | 文档链接 -| :----------: | :----------: | :----------: | :----------: | :----------: | :----------: | :----------: | -| 1 | @react-native-async-storage/async-storage | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage@1.19.5-0.0.3](https://github.com/react-native-oh-library/async-storage/releases/tag/1.19.5-0.0.3) | [链接](zh-cn/async-storage.md) | -| 2 | @react-native-picker/picker | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker@2.5.1-0.0.1](https://github.com/react-native-oh-library/picker/releases/tag/2.5.1-0.0.1) | [链接](zh-cn/picker.md) | -| 3 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox@0.5.16-0.0.1](https://github.com/react-native-oh-library/react-native-checkbox/releases/tag/0.5.16-0.0.1) | [链接](zh-cn/react-native-checkbox.md) | -| 4 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider@4.4.3-0.1.1](https://github.com/react-native-oh-library/react-native-slider/releases/tag/4.4.3-0.1.1) | [链接](zh-cn/react-native-slider.md) | -| 5 | @react-native-masked-view/masked-view | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view@0.2.9-0.0.1](https://github.com/react-native-oh-library/masked-view/releases/tag/0.2.9-0.0.1) | [链接](zh-cn/react-native-masked-view.md) | -| 6 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox@0.5.16-0.0.2](https://github.com/react-native-oh-library/react-native-checkbox/releases/tag/0.5.16-0.0.2) | [链接](zh-cn/react-native-checkbox.md) | -| 7 | react-native-linear-gradient | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-library/react-native-linear-gradient@3.0.0-alpha.1-0.2.4](https://github.com/react-native-oh-library/react-native-linear-gradient/releases/tag/3.0.0-alpha.1-0.2.4) | [链接](zh-cn/react-native-linear-gradient.md) | +| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | 已发布的最新版本 | 文档链接 +|:---:| :----------: |:-------------:| :----------: | :----------: | :----------: | :----------: | +| 1 | @react-native-async-storage/async-storage | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage@1.19.5-0.0.3](https://github.com/react-native-oh-library/async-storage/releases/tag/1.19.5-0.0.3) | [链接](zh-cn/async-storage.md) | +| 2 | @react-native-picker/picker | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker@2.5.1-0.0.1](https://github.com/react-native-oh-library/picker/releases/tag/2.5.1-0.0.1) | [链接](zh-cn/picker.md) | +| 3 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox@0.5.16-0.0.1](https://github.com/react-native-oh-library/react-native-checkbox/releases/tag/0.5.16-0.0.1) | [链接](zh-cn/react-native-checkbox.md) | +| 4 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider@4.4.3-0.1.1](https://github.com/react-native-oh-library/react-native-slider/releases/tag/4.4.3-0.1.1) | [链接](zh-cn/react-native-slider.md) | +| 5 | @react-native-masked-view/masked-view | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view@0.2.9-0.0.1](https://github.com/react-native-oh-library/masked-view/releases/tag/0.2.9-0.0.1) | [链接](zh-cn/react-native-masked-view.md) | +| 6 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox@0.5.16-0.0.2](https://github.com/react-native-oh-library/react-native-checkbox/releases/tag/0.5.16-0.0.2) | [链接](zh-cn/react-native-checkbox.md) | +| 7 | react-native-linear-gradient | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-library/react-native-linear-gradient@3.0.0-alpha.1-0.2.4](https://github.com/react-native-oh-library/react-native-linear-gradient/releases/tag/3.0.0-alpha.1-0.2.4) | [链接](zh-cn/react-native-linear-gradient.md) | +| 8 | @react-native-community/progress-bar-android | 1.0.4 | 是 | 90% | [@react-native-community/progress-bar-android@1.0.4-0.0.3](https://github.com/react-native-oh-library/progress-bar-android/releases/tag/1.0.4-0.0.3) | [链接](zh-cn/progress-bar-android.md) | ## 社区 [react-native-oh-library](https://github.com/react-native-oh-library) \ No newline at end of file diff --git a/_sidebar.md b/_sidebar.md index c0190f8a..055d9d73 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -7,4 +7,5 @@ - [@react-native-community/slider](zh-cn/react-native-slider.md) - [@react-native-community/checkbox](zh-cn/react-native-checkbox.md) - [@react-native-picker/picker](zh-cn/picker.md) + - [@react-native-community/progress-bar-android](zh-cn/progress-bar-android.md) diff --git a/zh-cn/progress-bar-android.md b/zh-cn/progress-bar-android.md new file mode 100644 index 00000000..df379977 --- /dev/null +++ b/zh-cn/progress-bar-android.md @@ -0,0 +1,220 @@ +

+

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

+

+

+ + Supported platforms + + + License + +

+ +## 安装与使用 + +> [!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 +``` + +进入到工程目录并输入以下命令： + +```bash +yarn add @react-native-oh-library/progress-bar-android +``` + +或者 + +```bash +npm install @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.componentName === 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。 + +| ` @react-native-oh-library/progress-bar-android` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | Required SDK Version | +| ---------------------------------------- | ----------------------------- | --------------------- | ------------------------------ | --------------------- | ----------------------- | +| `1.0.4-0.0.3` | `0.72.5` | `0.72.10` | `4.0.3.700` | `OpenHarmony 4.10.10` | `OpenHarmony 4.0.10.15` | + +## 属性 + +Inherits [View Props](https://reactnative.dev/docs/view#props). + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| --------------- | ---------------------------------------- | ---------------------------------------- | ---- | ------- | ---- | +| `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