@react-native-ohos/progress-view

v1.6.0

Published

2 days ago

React Native Progress View iOS Library

文档模板：v0.4.2

本项目基于 @react-native-community/progress-view 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/progress-view 版本所属关系如下：

| 三方库名称 | 三方库版本（npm地址） | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | 源码地址 | | ------------ | ------------ | ------------------------------ | ------------- | ------------- |------------------------ | ------------- | ------------- | | @react-native-ohos/progress-view | ~1.5.0 | Gitcode Releases | 0.77* | 否 | API12+ | 1.4.2 | br_rnoh0.77 |

简介

ProgressView 是 React Native 中用于展示进度条的组件。

下载安装

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/progress-view

yarn

yarn add @react-native-ohos/progress-view

Link

| | 是否支持autolink | RN框架版本 | |--------------------------------------|-----------------|------------| | ~1.5.0 | No | 0.77 |

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony。

1. Overrides RN SDK

为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 oh-package.json5 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号，也可以是一个模糊版本，还可以是本地存在的 HAR 包或源码目录。

关于该字段的作用请阅读官方说明

{
  "overrides": {
    "@rnoh/react-native-openharmony": "^0.77.18" // ohpm 在线版本
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
  }
}

2. 引入原生端代码

目前有两种方法：

通过 har 包引入；
直接链接源码。

方法一：通过 har 包引入（推荐）

[!TIP] har 包位于三方库安装路径的 harmony 文件夹下。

打开 entry/oh-package.json5，添加以下依赖

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-ohos/progress-view": "file:../../node_modules/@react-native-ohos/progress-view/harmony/progress_view.har"
  }

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

方法二：直接链接源码

[!TIP] 如需使用直接链接源码，请参考直接链接源码说明

3. 配置 CMakeLists 和引入 ProgressViewPackage

打开 entry/src/main/cpp/CMakeLists.txt，添加：

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
+ 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: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/progress-view/src/main/cpp" ./progress-view)
# RNOH_BEGIN: manual_package_linking_1

add_library(rnoh_app SHARED
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)

target_link_libraries(rnoh_app PUBLIC rnoh)

# 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_BEGIN: manual_package_linking_2

打开 entry/src/main/cpp/PackageProvider.cpp，添加：

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
#include "SamplePackage.h"
+ #include "ProgressViewPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
      std::make_shared<SamplePackage>(ctx),
+     std::make_shared<ProgressViewPackage>(ctx)
    };
}

找到 function buildCustomComponent()，一般位于 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets，添加：

...
import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+ import { RNCProgressView, PROGRESS_VIEW_TYPE } from "@react-native-ohos/progress-view"

@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
  ...  
+ if (ctx.componentName === PROGRESS_VIEW_TYPE) {
+   RNCProgressView({
+     ctx: ctx.rnComponentContext,
+     tag: ctx.tag
+   })
+ }
...
}
...

[!TIP] 本库使用了混合方案，需要添加组件名。

在entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets 找到常量 arkTsComponentNames 在其数组里添加组件名

const arkTsComponentNames: Array<string> = [
  SampleView.NAME,
  GeneratedSampleView.NAME,
  PropsDisplayer.NAME,
+ PROGRESS_VIEW_TYPE
  ];

4. 在 ArkTs 侧引入 ProgressViewPackage

打开 entry/src/main/ets/RNPackagesFactory.ts，添加：

  ...
+ import { ProgressViewPackage } from "@react-native-ohos/progress-view/ts";

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new ProgressViewPackage(ctx), 
  ];
}

5. 运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

本文档内容基于以下版本验证通过：

RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;

使用示例

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

import { ProgressView } from "@react-native-community/progress-view";

export default function ProgressViewExample() {
  return (
    <ProgressView
      progressTintColor="orange"
      trackTintColor="blue"
      progress={0.7}
    />
  )
}

接口说明

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

组件

| 名称 | 参数类型 | 必填 | 平台 | OpenHarmony平台支持 | 描述 | |------------|------------|------|------|----------------|------| | ProgressView | ProgressViewProps | yes | all | yes | ProgressView组件 |

属性

ProgressViewProps

| 名称 | 参数类型 | 默认值 | 必填 | 平台 | HarmonyOS平台支持 | 描述 | |----------------------|------------------------|---------|------|---------------------|------|----------------| | progress | number | 0 | No | All | Yes | 进度值（在0和1之间）。 | | progressTintColor | ColorValue | - | No | All | Yes | 进度条本身的着色。 | | trackTintColor | ColorValue | - | No | All | Yes | 进度条轨道的着色。 | | progressImage | Image.propTypes.source | - | No | All | No | 作为进度条显示的可拉伸图像。 | | trackImage | Image.propTypes.source | - | No | All | No | 显示在进度条后面的可拉伸图像。仅网络图像在Windows上有效。 | | progressViewStyle | enum('default', 'bar') | 'default' | No | All | No | 进度条样式。仅网络图像在Windows上有效。 |

遗留问题

原库部分接口在 HarmonyOS 中没有对应属性及接口处理相关逻辑，问题: issue#1

其他

无

目录结构

/rntpc_progress-view  # 项目根目录
├── harmony                              # 鸿蒙适配代码
│   ├── progress_view.har                # har 包
│   └── progress_view                    # 鸿蒙适配核心代码
│       ├── index.ets                    # 鸿蒙适配代码入口
│       ├── ts.ts                        # ArkTS 侧导出入口
│       └── src/main
│           ├── ets
│           │   ├── ProgressView.ets     # ProgressView 组件
│           │   ├── ProgressViewPackage.ts  # Package 注册
│           │   └── generated            # codegen 生成的 ArkTS 类型
│           └── cpp
│               ├── ProgressViewPackage.h   # C++ Package
│               └── generated            # codegen 生成的 C++ 代码
├── js                                   # RN 代码
│   ├── index.js                         # 入口文件
│   ├── index.d.ts                       # 类型定义
│   ├── ProgressView.harmony.js          # HarmonyOS 端组件实现
│   ├── ProgressView.{ios,android,macos,windows}.js  # 各平台实现
│   ├── RNCProgressViewNativeComponent.js
│   ├── RNCProgressViewNativeComponentAndroid.js
│   └── RNCProgressViewNativeComponentWindows.js
├── README.md                            # 中文安装使用方法
└── README_en.md                         # 英文安装使用方法

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR。

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。