rntpc_progress-view:基于 @react-native-community/progress-view 的 OpenHarmony 适配版，进度条组件

Star5
13
代码
代码
Issues1
Pull Requests
项目讨论
Wiki
分析
Star5
13

基于 @react-native-community/progress-view 的 OpenHarmony 适配版，进度条组件

分支3Tags4
当前项目代码仓暂无内容

文档模板：v0.4.2

@react-native-community/progress-view

本项目基于 @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
是否支持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配置。

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 包引入（推荐）

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

方法二：直接链接源码

如需使用直接链接源码，请参考[直接链接源码说明](https://gitcode.com/CPF-RN/usage-docs/blob/master/zh-cn/link-source-code.md)

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
+   })
+ }
...
}
...

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

在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

然后编译、运行即可。

约束与限制

兼容性

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

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

使用示例

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

使用时 import 的库名不变。

import { View, StyleSheet } from 'react-native';
import { ProgressView } from "@react-native-community/progress-view";

export default function ProgressViewDemo() {
  return (
    <View style={styles.container}>
      <ProgressView
        style={styles.linear}
        progress={0.7}
        progressTintColor="orange"
        trackTintColor="blue"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  linear: {
    height: 20,
  }
});

接口说明

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

"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 '#007AFF' No All Yes 进度条本身的着色。
trackTintColor ColorValue '#DCDCDC' No All Yes 进度条轨道的着色。
progressImage ImageSourcePropType - No All No 作为进度条显示的可拉伸图像。
trackImage ImageSourcePropType - No All No 显示在进度条后面的可拉伸图像。仅网络图像在Windows上有效。
progressViewStyle enum('default', 'bar') 'default' No All No 进度条样式。仅网络图像在Windows上有效。

遗留问题

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

其他

无

目录结构

/rntpc_progress-view  # 项目根目录
├── harmony                              # 鸿蒙适配代码
│   └── 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) ，请自由地享受和参与开源。

项目介绍

基于 @react-native-community/progress-view 的 OpenHarmony 适配版，进度条组件

MIT JavaScript242提交数typescriptopenharmonyios
定制我的领域
README
规则集