文档模板：v0.4.2

react-native-ui-lib

本项目基于 react-native-ui-lib 开发。

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

简介

react-native-ui-lib 组件用于 React Native。
react-native-ui-lib 是一套功能全面的 React Native UI 组件库，核心目标是为跨平台应用提供一致、美观且高度可定制的 UI 组件体系，覆盖从基础控件到复杂交互组件的全场景需求，简化 UI 开发流程并保证跨平台体验一致。

下载安装

本库在 HarmonyOS 侧的实现依赖于 @react-native-ohos/react-native-reanimated 和 @react-native-ohos/react-native-gesture-handler 的原生代码。如已在 HarmonyOS 工程中集成过这些库，则无需重复引入，可跳过本章节，直接使用。

若尚未引入，请参考 @react-native-ohos/react-native-reanimated 文档 和 @react-native-ohos/react-native-gesture-handler 文档 进行集成。

以下为根据所使用的组件按需引入的依赖项：

• @react-native-community/blur（Card 组件）

• @react-native-community/datetimepicker（DateTimePicker 组件）

• @react-native-community/netinfo（ConnectionStatusBar 组件）

进入工程目录并执行以下命令：

npm

npm install @react-native-ohos/react-native-ui-lib

yarn

yarn add @react-native-ohos/react-native-ui-lib

Link

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

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

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-ohos/react-native-ui-lib": "file:../../node_modules/@react-native-ohos/react-native-ui-lib/harmony/ui_lib.har"
  }

cd entry
ohpm install

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)

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/react-native-ui-lib/src/main/cpp" ./ui-lib)

# RNOH_END: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

add_library(rnoh_app SHARED
    ${GENERATED_CPP_FILES}
    "./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_ui_lib)
# RNOH_END: manual_package_linking_2

#include "RNOH/PackageProvider.h"
#include "SamplePackage.h"
+ #include "UiLibPackage.h"

using namespace rnoh;

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

  ...
+ import { HighlighterView } from "@react-native-ohos/react-native-ui-lib";

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

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

  ...
+ import { UiLibPackage } from '@react-native-ohos/react-native-ui-lib/ts';

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

运行方式

点击右上角的 sync 按钮

或者在命令行终端中执行以下命令：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

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

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

使用示例

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

import React, {Component} from 'react';
import {Colors, Typography, Spacings, ThemeManager, View, Text, Card, Button} from 'react-native-ui-lib';

Colors.loadColors({
  primaryColor: '#2364AA',
  secondaryColor: '#81C3D7',
  textColor: '#221D23',
  errorColor: '#E63B2E',
  successColor: '#ADC76F',
  warnColor: '#FF963C'
});

Typography.loadTypographies({
  heading: {fontSize: 36, fontWeight: '600'},
  subheading: {fontSize: 28, fontWeight: '500'},
  body: {fontSize: 18, fontWeight: '400'}
});

Spacings.loadSpacings({
  page: 20,
  card: 12,
  gridGutter: 16
});

// with plain object
ThemeManager.setComponentTheme('Card', {
  borderRadius: 8
});

// with a dynamic function
ThemeManager.setComponentTheme('Button', (props, context) => {
  // 'square' is not an original Button prop, but a custom prop that can
  // be used to create different variations of buttons in your app
  if (props.square) {
    return {
      borderRadius: 0
    };
  }
});

class MyScreen extends Component {
  render() {
    return (
      <View flex padding-page>
        <Text heading marginB-s4>
          My Screen
        </Text>
        <Card height={100} center padding-card marginB-s4>
          <Text body>This is an example card </Text>
        </Card>

        <Button label="Button" body bg-primaryColor square></Button>
      </View>
    );
  }
}

使用说明

BorderGradient

<Incubator.Gradient
  type="border"
  colors={[Colors.red30, Colors.purple30]}
  width={250}
  height={100}
  borderWidth={6}
  borderRadius={12}
>
  <View center flex>
    <Text text60 red30>Custom Content</Text>
    <Text text90 grey40>Inside Border Gradient</Text>
  </View>
</Incubator.Gradient>

CircleGradient

<Incubator.Gradient
  type="circle"
  colors={[Colors.red30, Colors.orange30]}
  radius={40}
>
  <View center flex>
    <Text text60 white>OK</Text>
  </View>
</Incubator.Gradient>

RectangleGradient

<Incubator.Gradient
  type="rectangle"
  colors={GRADIENT_COLORS}
  width={200}
  height={80}
>
  <View center flex>
    <Text text70 white>Rectangle</Text>
  </View>
</Incubator.Gradient>

接口说明

组件

详细请查看 react-native-ui-lib 的文档介绍

Text：文本组件，该组件扩展了 Text 属性。

TouchableOpacity：触摸反馈透明度组件，该组件扩展了 TouchableOpacity 属性。

View：容器组件，该组件扩展了 View 属性。

ActionBar：快速操作栏，每个操作都支持按钮组件道具，该组件扩展了 View 属性。

Button：按钮组件，该组件扩展了 TouchableOpacity 属性。

Checkbox：复选框组件，该组件扩展了 TouchableOpacity 属性。

Chip：芯片组件，该组件扩展了 TouchableOpacity，View 属性。

RadioButton：单选按钮组件。

RadioGroup：包裹单选按钮组件，与 RadioButton 配合使用。

Slider：滑块组件。

Switch：开关切换组件。

ChipsInput：芯片输入组件，该组件扩展了 TextField 属性。

ColorPalette：调色板组件。

ColorPicker：选色器组件。

ColorSwatch：颜色样板组件。

DateTimePicker：时间选择组件，该组件扩展了 TextField 属性，依赖 @react-native-community/datetimepicker 库。

MaskedInput：掩码输入组件，该组件扩展了TextInput属性。

NumberInput：数字输入框组件。

Picker：弹窗选择组件。

Picker.Item：弹窗选择项组件，配合 Picker 组件使用。

SectionsWheelPicker：滚动选择组件。

SegmentedControl：切换值组件。

Stepper：步进器组件。

TextField：文本域组件，扩展了TextInput属性。

WheelPicker：轮式选择器组件。

Incubator.Dialog：弹出对话框组件。

Dialog.Header：弹窗头部组件。

Incubator.Slider：滑块组件。

Incubator.Toast：非侵入式弹窗组件。

Dash：虚线组件。

ExpandableSection：展开/收起组件。

Fader：渐变淡入淡出组件。

Gradient：渐变色组件。

KeyboardAccessoryView：键盘附件视图。

KeyboardAwareInsetsView：用于在使用键盘时添加内边距，避免键盘遮挡部分屏幕。该组件扩展了 KeyboardTrackingView 的属性，此组件仅适用于 iOS。

KeyboardRegistry：用于注册键盘并对键盘执行某些操作。

KeyboardTrackingView：为当前视图及其子视图启用“键盘跟踪”的 UI 组件。通常用于视图内含有 TextField 或 TextInput 的场景，此组件仅适用于 iOS。

Overlay：带类型的覆盖视图，继承 Image 组件属性，扩展了 image 组件。

Card：卡片组件，扩展了TouchableOpacity组件，依赖@react-native-community/blur。

Card.Image：Card 组件的内部组件（最好是直接子组件），扩展了Image组件。

Card.Section：用于在 Card 组件内轻松渲染内容的内部组件，扩展了View组件。

Carousel：轮播组件，扩展了ScrollView组件。

LoaderScreen：全屏显示组件，通常用于页面加载loading，扩展了Activityindicator组件。

StackAggregator：堆栈聚合器组件。

StateScreen：显示全屏组件。

Drawer：抽屉组件，如果您的应用程序与 RNN 配合使用，则您的屏幕必须使用"react-native-gesture-handler"中的gestureHandlerRootHOC 进行包装。请参阅这里。

GridList：网格列表组件，扩展了FlatList组件。

GridListItem：单个网格视图/列表项组件。

GridView：网格视图组件。

ListItem：列表中的列表项组件，该组件继承了 TouchableOpacity 的属性。

ListItem.Part：用于 ListItem 内部布局的列表项子组件。

SortableGridList：可排序网格列表组件，该组件继承了 GridList 组件的属性。

SortableList：可排序列表组件，该组件继承了 FlatList 组件的属性。

Timeline：时间线组件，该组件继承了 View 组件的属性。

AnimatedImage：图像加载完成后以动画方式淡入的图像组件，该组件继承了 Image 组件的属性。

AnimatedScanner：该组件继承了 Animated.View 组件的属性。

Avatar：头像组件，该组件继承了 TouchableOpacity 和 Image 组件的属性。

Icon：图标组件，该组件继承了 Image 组件的属性。

Image：图片组件，该组件扩展了Image组件属性。

Marquee：滑动文本组件。

ProgressiveImage：带动画的图像组件，该组件扩展了AnimatedImage组件属性。

PageControl：页面指示器组件。

TabController：具有延迟加载机制的选项卡控制器组件，该组件基于 react-native-gesture-handler，使用 react-native-navigation 时，请确保使用 gestureHandlerRootHOC 包裹屏幕。

TabController.PageCarousel：TabController 的 PageCarousel 组件，该组件扩展了ScrollView组件属性。

TabController.TabBar：TabController 的 TabBar 组件。

TabController.TabBarItem：TabController 的 TabBarItem 组件。

TabController.TabPage：TabController 的 TabPage 组件。

Wizard：向导组件。

Wizard.Step：向导组件中的 Step 组件。

ActionSheet：弹窗选择组件。

Dialog：弹窗组件。

FeatureHighlight：功能发现组件，FeatureHighlight 组件必须是 render() 返回的根视图的直接子级，如果要突出显示的元素没有样式属性，请添加 'style={{opacity: 1}}' 以便 Android 操作系统可以检测到它，FeatureHighlight 使用 native 库，你需要引入它。

FloatingButton：具有渐变的悬浮按钮。

Modal：模态框组件，该组件扩展了 Modal 组件属性。

Modal.TopBar：模态框的 TopBar 组件。

Toast：非中断式弹窗组件，请考虑转向我们新的 Toast 实现并使用 Incubator.Toast 代替。

Badge：圆形彩色徽章组件。

ConnectionStatusBar：顶部栏显示无网络连接状态，该组件依赖 @react-native-community/netinfo 库。

ProgressBar：进度条组件。

SkeletonView：骨架屏组件，用于在内容尚未加载完成时展示临时占位效果。使用该组件前需安装 react-native-shimmer-placeholder 和 react-native-linear-gradient 库。