文档模板：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：弹窗选择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 内进行布局的子 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库。

searchInput：用于过滤目的的搜索输入组件。