rntpc_nativebase:基于 NativeBase 的 OpenHarmony 适配版，功能丰富的 React Native UI 组件库

Star33
12
代码
代码
Issues1
Pull Requests
项目讨论
Wiki
分析
Star33
12

基于 NativeBase 的 OpenHarmony 适配版，功能丰富的 React Native UI 组件库

分支3Tags3

文档模板：v0.4.2

NativeBase

本项目基于 native-base 开发。

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

三方库名称 三方库版本（npm地址） 发布信息 支持RN版本 Autolink 编译API版本 社区基线版本 源码地址
@react-native-ohos/native-base ~3.4.29 Gitcode Releases 0.72.* 否 API12+ 3.4.28 br_rnoh0.72

简介

NativeBase 是一套面向 React Native 的跨平台 UI 组件库，提供主题、布局、表单、反馈与导航等常用组件，便于快速构建一致的应用界面。

本库为纯 JS 库，OpenHarmony 侧能力通过依赖的其它三方库提供。

下载安装

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

npm

npm install @react-native-ohos/native-base

yarn

yarn add @react-native-ohos/native-base

NativeBase 本身为纯 JS 组件库，无需对本库进行原生 Link。HarmonyOS 侧能力依赖以下三方库，请查看对应文档：

本库 HarmonyOS 侧实现依赖 react-native-gesture-handler、react-native-reanimated、react-native-safe-area-context、react-native-svg、react-navigation-drawer、react-native-tab-view、react-native-vector-icons、react-native-pager-view 的原生端代码，如已在 HarmonyOS 工程中引入过这些库，则无需再次引入，可跳过本章节步骤直接使用。

如未引入，请参照 react-native-gesture-handler 文档的 Link 章节、react-native-reanimated 文档的 Link 章节、react-native-safe-area-context 文档的 Link 章节、react-native-svg 文档的 Link 章节、react-navigation-drawer 文档的 Link 章节、react-native-tab-view 文档的 Link 章节、react-native-vector-icons 文档的 Link 章节、react-native-pager-view 文档的 Link 章节进行引入。

约束与限制

兼容性

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

  1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18;
  2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112;
  3. RNOH: 0.82.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM: 6.0.0.120;

权限要求

无

编译运行API要求

当前三方库所有版本均已实现版本隔离，支持在 `API12+` 工程编译，及 `API12+` ROM运行。

使用示例

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

使用时 `import` 的库名不变，仍然为 `native-base`。

// NativeBaseProvider 是一个使主题可在整个应用中使用的组件。它使用 React 的 Context API。将 NativeBaseProvider 添加到应用的根目录并更新 App.js,要按如下所示使用.
import React from "react";
import { SafeAreaView, View } from "react-native";
import { NativeBaseProvider } from "native-base";

function App() {
  return (
    <NativeBaseProvider>
      <View style={{ backgroundColor: "white" }}>
        <SafeAreaView></SafeAreaView>
      </View>
    </NativeBaseProvider>
  );
}
export default App;

import { StyleSheet, View } from "react-native";
import { Text } from "native-base";

export function TextTest() {
  return (
    <View style={styles.container}>
      <Text fontSize="xs">xs</Text>
      <Text fontSize="sm">sm</Text>
      <Text fontSize="md">md</Text>
      <Text fontSize="lg">lg</Text>
      <Text fontSize="xl">xl</Text>
      <Text fontSize="2xl">2xl</Text>
      <Text fontSize="3xl">3xl</Text>
      <Text fontSize="4xl">4xl</Text>
      <Text fontSize="5xl">5xl</Text>
      <Text fontSize="6xl">6xl</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    padding: 10,
    margin: 25,
    borderRadius: 5,
    borderWidth: 3,
  },
});

使用说明

组件使用详情见 NativeBase 的文档介绍。

接口说明

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

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

属性

以下为目前已支持的组件属性：

AspectRatio: AspectRatio 控制节点或子组件未定义维度的大小

Name Description Type Required Platform HarmonyOS Support
ratio 容器的纵横比。例如 16/9、16/10、9/16、4/3 Object No All Yes

Box: 这是一个满足低级布局需求的通用组件。它类似于div在HTML中。

Name Description Type Required Platform HarmonyOS Support
children 将组件渲染为 Box 子项。接受 React.Element 或 JSX.Element 数组。 React.element No All Yes
_text 用于为 Box 内的文本提供参数 Any No All Yes
bg 简写设置背景 String No All Yes
background 可以接受各种背景相关的设置，如颜色、图像、渐变等 String No All Yes
bgColor 明确用于设置背景颜色 String No All Yes
backgroundColor 与bgColor类似，专门用于设置背景颜色 String No All Yes

Center: 布局组件中心对齐 继承了React Native中View参数

Name Description Type Required Platform HarmonyOS Support
accessibilityActions 无障碍动作允许辅助技术程序化调用组件的动作 array No All Yes(API13+)
onAccessibilityAction 当用户执行无障碍操作时调用 function No All Yes(API13+)

Container: 容器根据当前断点限制内容的宽度，同时保持尺寸的流动性。 [Container实现了Box的功能，所以所有Box的属性都能传给Container]

Flex: 布局组件，Flex 是 CSS flex 布局的一个封装

Name Description Type Required Platform HarmonyOS Support
direction 项目定位方向，值可以为 column,column-reverse,row,row-reverse String No All Yes
wrap 子元素的换行方式nowrap,wrap,wrap-reverse String No All Yes
align 子元素在交叉轴上的对齐方式，可选flex-start,flex-end,center,stretch,baseline String No All Yes
justify 子元素在主轴上的对齐方式，可选flex-start,flex-end,center,space-between,space-around,space-evenly String No All Yes
basis 设置子元素在主轴方向上的初始基准尺寸 String No All Yes
grow 定义子元素分配容器剩余空间的放大比例 Number No All Yes
shrink 用于定义容器空间不足时，子元素的自动收缩比例 Number No All Yes

HStack / Row: HStack / Row 布局组件水平对齐

Name Description Type Required Platform HarmonyOS Support
direction 堆叠项目的方向，可选row,column,column-reverse,row-reverse String No All Yes

Stack: 根据方向属性， Stack垂直或水平对齐项目

Name Description Type Required Platform HarmonyOS Support
divider 元素之间使用的分隔元素。 ReactElement No All Yes
space 每个堆栈项之间的空间。接受响应值 sm,2xs,xs,md,xl,lg,2xl,gutter,SpaceType ReactElement No All Yes
reversed 确定是否反转堆叠项目的方向。 Boolean No All Yes
direction 堆叠项目的方向,可选row，column，column-reverse，row-reverse String No All Yes
isHovered 是否悬停 Boolean No Web No
isFocused 是否聚焦 Boolean No No No
isDisabled 是否禁用 Boolean No No No
isInvalid 是否无效 Boolean No No No
isReadOnly 是否只读,如果为 true，则阻止编辑子项的值。与 FormControls 一起使用 Boolean No No No

VStack / Column: VStack / Column 布局组件垂直对齐

Name Description Type Required Platform HarmonyOS Support
direction 堆叠项目的方向，可选row,column,column-reverse,row-reverse String No All Yes

ZStack: ZStack将元素与 z 轴对齐

Name Description Type Required Platform HarmonyOS Support
reversed 堆叠项目的方向，是否反转 Boolean No All Yes

Button: 按钮

Name Description Type Required Platform HarmonyOS Support
variant 风格，可选link，subtle，solid，ghost，outline，unstyled String No All Yes
colorScheme 主题 String No All Yes
size 按钮大小，可选sm（小尺寸）、md（中等尺寸）、lg（大尺寸） String No All Yes
isLoading 是否加载中 Boolean No All Yes
isHovered 是否悬停 Boolean No Web No
isPressed 是否按下 Boolean No All Yes
isFocused 是否被聚焦 Boolean No All Yes
isFocusVisible 是否展示焦环 Boolean No No No
startIcon 开始图标元素 React.element No All Yes
endIcon 结束图标元素 React.element No All Yes
isLoadingText 正在加载文本 String No All Yes
spinner 加载中传入的元素 JSX.Element No All Yes
isDisabled 是否禁用 Boolean No All Yes
_text 用于为框内的文本提供参数 Object No All Yes
_stack 要传递给按钮内部使用的 HStack 的参数 Object No All Yes
_icon 传递给按钮内部使用的图标的参数 Object No All Yes
spinnerPlacement 指定加载指示器（spinner）的位置，可选start，end String No All Yes
_loading 当按钮加载中时传递的参数 Object No All Yes
_isDisabled 当按钮禁用时传递给按钮的参数 Object No All Yes
_spinner 当按钮加载中时传递给按钮的参数 Object No All Yes
_hover 当按钮悬停时传递给按钮的参数 Object No Web No
_pressed 当按钮按下时传递给按钮的参数 Object No All Yes
_focus 当按钮获得焦点时传递给按钮的参数 Object No All Yes
rightIcon 按钮中使用的右侧图标元素 React.element No All Yes
leftIcon 按钮中使用的左侧图标元素 React.element No All Yes
direction 堆叠项目的方向，可选row,column String No All Yes
children 将组件渲染为 Box 子项。接受 JSX.Element 或 JSX.Element 数组。 React.element No All Yes
isAttached 如果为真，按钮将会连接在一起 Boolean No All Yes

Pressable: 创建可触摸交互的元素。

Name Description Type Required Platform HarmonyOS Support
onHoverIn 鼠标移入调用 () => void No Web No
onHoverOut 鼠标移出调用 () => void No Web No
onFocus 聚焦时调用 () => void No No No
onBlur 失焦时调用 () => void No No No
_hover 悬停参数 Object No Web No
_pressed 按下时参数 Object No All Yes
_focus 获得焦点时参数 Object No All Yes
_disabled 禁用时参数 Object No All Yes
isDisabled 是否禁用 Boolean No All Yes
isHovered 是否悬停 Boolean No Web No
isPressed 是否按下 Boolean No All Yes
isFocused 是否聚焦 Boolean No No No
isFocusVisible 是否展示焦环 Boolean No All No
_focusVisible 焦点可见时应用的样式属性。这些样式仅在用户使用键盘与应用交互时应用。（仅限 Web） Object No Web No
children 将组件渲染为 Box 子项。接受 JSX.Element 或 JSX.Element 数组。 React.element No All Yes

CheckBox: 复选框。

Name Description Type Required Platform HarmonyOS Support
id 唯一标识 String No All Yes
value 复选框的值 String No All Yes
defaultValue 复选框组的初始值 String No All Yes
colorScheme 主题，可选danger，info，orange，purple String No All Yes
size 按钮大小，可选sm（小尺寸）、md（中等尺寸）、lg（大尺寸） String No All Yes
onChange 选中事件 () => void No All Yes
_checkbox 选中复选框时传递的参数 Object No All Yes

FormControl: 表单控件

Name Description Type Required Platform HarmonyOS Support
nativeID 本地ID String No All Yes
isInvalid 是否无效 Boolean No All Yes
isRequired 是否必须 Boolean No All Yes
isDisabled 是否禁用 Boolean No No No
isReadOnly 是否只读 Boolean No All Yes
_disabled 禁用状态下传递参数 Object No All Yes
htmlFor 反映“for”内容属性的值 String No Web No
_astrick 应用于 astric 文本的道具 Object No Web No
rightIcon 表单中使用的左侧侧图标元素 React.element No All Yes
leftIcon 表单中使用的右侧图标元素 React.element No All Yes
startIcon 开始图标元素 React.element No All Yes
endIcon 结束图标元素 React.element No All Yes
_stack 要传递给 FormControl.ErrorMessage 内部使用的 HStack 的参数 Object No All Yes
_invalid 无效状态下传递参数 Object No All Yes

IconButton: 图标按钮

Name Description Type Required Platform HarmonyOS Support
colorScheme 主题，可选primary，green，red String No All Yes
variant 风格，可选link，unstyled，solid，ghost，subtle String No All Yes
size 按钮大小，可选xs（微小尺寸）、sm（小尺寸）、md（中等尺寸）、lg（大尺寸） String No All Yes
isDisabled 是否禁用 Boolean No All Yes
icon 要使用的图标 React.element No All Yes
_icon 要传递给IconButton内部使用的图标的参数 Object No All Yes
_hover 要传递给IconButton内部使用的悬停的参数 Object No Web No
_pressed 要传递给IconButton内部使用的按压的参数 Object No All Yes
_focus 要传递给IconButton内部使用的聚焦的参数 Object No All Yes

Input: 输入框

Name Description Type Required Platform HarmonyOS Support
isInvalid 是否无效 Boolean No All Yes
variant 风格，可选outline，filled，underlined，unstyled，rounded String No All Yes
isDisabled 是否禁用 Boolean No All Yes
isHovered 是否悬停 Boolean No Web No
isFocused 是否聚焦 Boolean No All Yes
size 输入框尺寸，可选sm（小尺寸）、md（中等尺寸）、lg（大尺寸） String No All Yes
isRequired 是否必传 Boolean No No No
isReadOnly 是否只读 Boolean No All Yes
InputLeftElement 输入框内部左侧元素 React.element No All Yes
leftElement 输入框外部左侧元素 React.element No All Yes
InputRightElement 输入框内部右侧元素 React.element No All Yes
rightElement 输入框外部右侧元素 React.element No All Yes
type 类型，可选text，password String No All Yes
isFullWidth 沾满元素 Boolean No No No
wrapperRef 获取节点 Any No No No
_hover 要传递给Input内部使用的悬停的参数 Object No Web NO
_focus 要传递给Input内部使用的聚焦的参数 Object No All Yes
_disabled 要传递给Input内部使用的禁用的参数 Object No All Yes
_readOnly 要传递给Input内部使用的只读的参数 Object No All Yes
_invalid 无效状态下传递参数 Object No All Yes
_input 传递给InputBase组件参数 Object No All Yes
_stack 要传递给按钮内部使用的 HStack 的参数 Object No All Yes
focusOutlineColor 当输入框获得焦点时，该属性指定输入框的轮廓颜色 String No All Yes
invalidOutlineColor 当输入框中的内容被认为是无效时，该属性指定输入框的轮廓颜色 String No All Yes
ref 节点 Any No All Yes

TextArea: 文本域

Name Description Type Required Platform HarmonyOS Support
isInvalid 是否无效 Boolean No All Yes
variant 风格，可选outline，filled，underlined，unstyled，rounded String No All Yes
isDisabled 是否禁用 Boolean No All Yes
isHovered 是否悬停 Boolean No Web No
isFocused 是否聚焦 Boolean No All Yes
size 输入框尺寸，可选sm（小尺寸）、md（中等尺寸）、lg（大尺寸） String No All Yes
isRequired 是否必传 Boolean No No No
isReadOnly 是否只读 Boolean No All Yes
InputLeftElement 输入框内部左侧元素 React.element No All Yes
leftElement 输入框外部左侧元素 React.element No All Yes
InputRightElement 输入框内部右侧元素 React.element No All Yes
rightElement 输入框外部右侧元素 React.element No All Yes
type 类型，可选text，password String No All Yes
isFullWidth 沾满元素 Boolean No No No
wrapperRef 获取节点 Any No All Yes
_hover 要传递给Input内部使用的悬停的参数 Object No Web NO
_focus 要传递给Input内部使用的聚焦的参数 Object No All Yes
_disabled 要传递给Input内部使用的禁用的参数 Object No All Yes
_readOnly 要传递给Input内部使用的只读的参数 Object No All Yes
_invalid 无效状态下传递参数 Object No All Yes
_stack 要传递给按钮内部使用的 HStack 的参数 Object No All Yes
focusOutlineColor 当输入框获得焦点时，该属性指定输入框的轮廓颜色 String No All Yes
invalidOutlineColor 当输入框中的内容被认为是无效时，该属性指定输入框的轮廓颜色 String No All Yes
placeholder 提示文本 String No All Yes

Link: 超链接

Name Description Type Required Platform HarmonyOS Support
href 连接地址 String No All Yes
size 超连接尺寸2xl，xl，lg，md，sm，xsm String No All Yes
isUnderlined 是否有下横线 Boolean No All Yes
isHovered 是否悬停 Boolean No Web No
onPress 按压事件 () => void No All Yes
isExternal 是否直接打开web端 String No No No
_hover 悬停参数 Object No Web No
wrapperRef 获取节点 Any No All Yes

Radio: 单选框

Name Description Type Required Platform HarmonyOS Support
value 单选框的值 String No All Yes
colorScheme 主题，可选yellow，green，red String No All Yes
isDisabled 是否禁用 Boolean No All Yes
isHovered 是否悬停 Boolean No Web No
isPressed 是否按压 Boolean No All Yes
isFocused 是否聚焦 Boolean No All Yes
isInvalid 是否失效 Boolean No All Yes
onChange 改变事件 () => void No All Yes
isFocusVisible 焦点是否可见 Boolean No No No
size 单选框尺寸lg，md，sm String No All Yes
icon 接收图标 React.element No All Yes
wrapperRef 获取节点 Any No All Yes
_stack 要传递给单选框内部使用的 HStack 的参数 Object No All Yes
_disabled 当禁用时传递给单选框的参数 Object No All Yes
_checked 当选中时传递给单选框的参数 Object No All Yes
_focus 当聚焦时传递给单选框的参数 Object No All Yes
_hover 当悬停时传递给单选框的参数 Object No Web No
_invalid 当失效时传递给单选框的参数 Object No All Yes
_pressed 当按压时传递给单选框的参数 Object No All Yes
_icon 当传递图标时传递给单选框的参数 Object No All Yes
_readOnly 当只读时传递给单选框的参数 Object No All Yes
_interactionBox 当交互时传递给按钮的参数 Object No All Yes
ref 获取节点数据 Object No All Yes

Select: 下拉框

Name Description Type Required Platform HarmonyOS Support
placeholder 提示文本 String No All Yes
color 选中颜色 String No No Yes
placeholderTextColor 提示文本颜色 String No iOS No
_item 每个选项的参数 Object No All Yes
_selectedItem 选中选项的参数 Object No All Yes
selectedValue 选中值 String No All Yes
defaultValue 初始值 String No All Yes
onValueChange 单选事件 () => void No All Yes
isDisabled 是否禁用 Boolean No All Yes
isHovered 是否悬停 Boolean No Web No
isFocused 是否聚焦 Boolean No All Yes
isFocusVisible 焦点是否可见 Boolean No No No
dropdownIcon 原有图标 React.element No All Yes
dropdownOpenIcon 打开图标 React.element No All Yes
dropdownCloseIcon 关闭图标 React.element No All Yes
variant 风格，可选outline，filled，underlined，unstyled，rounded String No All Yes
onOpen 打开下拉事件 () => void No All Yes
onClose 关闭下拉事件 () => void No All Yes
_actionSheet 传递给遮罩层的参数样式 Object No All Yes
_actionSheetContent 传递给内容的参数样式 Object No All Yes
_actionSheetBody 传递给内容Body的参数 Object No All Yes
wrapperRef 获取节点 Any No No No
accessibilityLabel 当用户与元素交互时读取的文本 String No No No

Select.Item: 下拉框子集

Name Description Type Required Platform HarmonyOS Support
label 选择提示文本 String No All Yes
value 选中值 String No All Yes

Switch: 开关

Name Description Type Required Platform HarmonyOS Support
size 开关尺寸，可选lg，md，sm String No All Yes
isDisabled 是否禁用 Boolean No All Yes
isHovered 是否悬停 Boolean No Web No
name 表单中使用开关的别名 String No All Yes
onToggle 开关事件 () => void No All Yes
isChecked 是否开启 Boolean No All Yes
defaultIsChecked 是否默认开启 Boolean No All Yes
isInvalid 是否失效 Boolean No All Yes
onTrackColor 打开时轨道的颜色 Object No All Yes
offTrackColor 关闭时轨道的颜色 Object No All Yes
onThumbColor 打开时按钮的颜色 Object No All Yes
offThumbColor 关闭时按钮的颜色 Object No All Yes
colorScheme 主题 String No All Yes
_hover 悬停参数 String No Web No

Slider: 滑块

Name Description Type Required Platform HarmonyOS Support
value 值 Number No All Yes
defaultValue 默认值 Number No All Yes
onChange 滑块事件 () => void No All Yes
colorScheme 主题 String No All Yes
orientation 展示方向，可选horizontal，vertical' String No All Yes
accessibilityLabel 滑块文本描述 String No No No
isReversed 是否反转 Boolean No All Yes
isDisabled 是否禁用 Boolean No All Yes
onChangeEnd 松开停止移动事件 () => void No All Yes
minValue 最小值 Number No All Yes
maxValue 最大值 Number No All Yes
step 每次用移动的步数 Number No All Yes
isReadOnly 是否只读 Boolean No All Yes
_disabled 禁用时启用 Object No All Yes
_readOnly 只读时启用 Object No All Yes
sliderTrackHeight 轨道高度 Number No All Yes
thumbSize 滑块大小 Number No All Yes
_interactionBox 交互样式 Object No All Yes

Badge: 小标识小标签

Name Description Type Required Platform HarmonyOS Support
variant 风格 String No All Yes
colorScheme 主题,可选success，danger，info，coolGray String No All Yes
rightIcon 组件右侧图标 React.element No All Yes
leftIcon 组件左侧图标 React.element No All Yes
startIcon 开始图标 React.element No All Yes
endIcon 结束图标 React.element No All Yes
_text 组件内的文本提供参数 Object No All Yes
_icon 组件内的图标提供参数 Object No All Yes

Divider: 分割线

Name Description Type Required Platform HarmonyOS Support
orientation 方向,可选vertical，horizontal Number No All Yes
thickness 分割线宽度 String No All Yes

Alert: 状态提示框

Name Description Type Required Platform HarmonyOS Support
status 状态,可选info，warning，success，error String No All Yes
variant 风格 String No All Yes
colorScheme 主题 String No All Yes

Progress: 进度条

Name Description Type Required Platform HarmonyOS Support
value 数值 Number No All Yes
size 尺寸 String No All Yes
colorScheme 主题 String No All Yes
_filledTrack 填充的轨道提供参数 Object No All Yes
min 最小值 Number No All Yes
max 最大值 Number No All Yes

Skeleton: 组件的加载状态

Name Description Type Required Platform HarmonyOS Support
fadeDuration 加载时长 Number No All Yes
isLoaded 是否加载中 Boolean No All Yes
speed 加载速度 Number No All Yes
startColor 开始颜色 String No All Yes
endColor 结束颜色 String No All Yes
size 尺寸 String No All Yes

Skeleton.Text: 组件的加载状态文字组件

Name Description Type Required Platform HarmonyOS Support
fadeDuration 加载时长 Number No All Yes
isLoaded 是否加载中 Boolean No All Yes
speed 加载速度 Number No All Yes
startColor 开始颜色 String No All Yes
endColor 结束颜色 String No All Yes
lines 文本中的行数 Number No All Yes
_line 文本中的行数样式参数 String No All Yes
_stack 要传递给按钮内部使用的 HStack 的参数 String No No No

Spinner: 加载等待中

Name Description Type Required Platform HarmonyOS Support
color 颜色 String No All Yes
size 尺寸，可选lg，md，sm String No All Yes

Toast: 轻提示

Name Description Type Required Platform HarmonyOS Support
show 消息体 Object No All Yes
close 关闭单个 (id: any) => void; No All Yes
closeAll 关闭所有 () => void No All Yes
isActive 防抖设计 (id: any) => boolean; No All Yes

Toast.show: 轻提示消息体

Name Description Type Required Platform HarmonyOS Support
title 标题 ReactNode No All Yes
description 内容描述 ReactNode No All Yes
duration 显示时长 Number 或 null No All Yes
id 唯一标识 any No All Yes
onCloseComplete 显示完成关闭回调 () => void No All Yes
placement 位置，可选top，top-right，top-left，bottom，bottom-left，bottom-right String No All Yes
render 接收子组件 (props: any) => ReactNode No All Yes
_title 标题样式参数 Object No All Yes
_description 描述样式参数 Object No All Yes
accessibilityAnnouncement Toast 打开时屏幕阅读器播报的文本 String No Android No
accessibilityLiveRegion Toast 打开时屏幕阅读器播报的文本位置 String No Android No
avoidKeyboard 键盘打开，则 Toast 将向上移动相当于键盘高度 Boolean No iOS Yes

Text: 文本

Name Description Type Required Platform HarmonyOS Support
children 子集 JSX.Element No All Yes
fontSize 字号 String No All Yes
letterSpacing 间距 String No All Yes
lineHeight 行高 String No All Yes
fontWeight 字宽 String No All Yes
Fonts 字型 String No No No
noOfLines 行数 Number No All Yes
bold 加粗 Number No All Yes
isTruncated 超出省略 Boolean No All Yes
italic 斜体 Boolean No All Yes
underline 下横线 Boolean No All Yes
strikeThrough 删除线 Boolean No All Yes
sub 字体缩小（副标题或者辅助说明的文本） Boolean No All Yes
highlight 突出显示 Boolean No All Yes

Heading: 标题(继承了Text属性)

Name Description Type Required Platform HarmonyOS Support
size 尺寸，可选lg，md，sm String No All Yes

AlertDialog: 警告对话框

Name Description Type Required Platform HarmonyOS Support
isOpen 是否打开 Boolean No All Yes
onClose 关闭事件 () => void No All Yes
defaultIsOpen 是否打开 Boolean No All Yes
size 尺寸 Number No All Yes
leastDestructiveRef 最小元素节点 Object No No No
initialFocusRef 打开时焦点元素节点 Object No All Yes
finalFocusRef 关闭时焦点元素节点 Object No All Yes
avoidKeyboard 键盘打开，则 AlertDialog 将向上移动相当于键盘高度 Boolean No iOS Yes
closeOnOverlayClick 点击关闭 Boolean No All Yes
isKeyboardDismissable Esc关闭 Boolean No No No
overlayVisible 背景元素是否可见 Boolean No All Yes
backdropVisible 背景元素是否可见 Boolean No All Yes
_backdrop 遮罩参数用样式 Any No All Yes
_backdropFade 遮罩动画的参数样式 Object No All Yes
_fade 子集褪色动画的参数样式 Object No All Yes
_slide 子集幻灯片动画的参数样式 Object No All Yes
animationPreset 动画类型 String No All Yes

Menu: 菜单

Name Description Type Required Platform HarmonyOS Support
trigger 手动触发显示的元素 () => void Yes All Yes
onOpen 打开事件 () => void No All Yes
onClose 关闭事件 () => void No All Yes
closeOnSelect 选择时菜单是否自动关闭 Boolean No All Yes
defaultIsOpen 默认打开 Boolean No All Yes
isOpen 是否打开 Boolean No All Yes
crossOffset 控制菜单相对于触发元素的偏移量 Number No All Yes
offset 菜单弹出位置的偏移量 Number No All Yes
shouldOverlapWithTrigger 控制菜单是否与触发元素重叠显示。 boolean No All Yes
placement 位置，可选top,bottom,left,right等 String No All Yes
_overlay 菜单的覆盖层参数 Object No All Yes
_presenceTransition 出现和消失过渡效果参数 Object No All Yes
_backdrop 背景遮罩参数 Object No All Yes
shouldFlip 没有空间时元素是否翻转 Boolean No All Yes

Menu.Item: 菜单子项

Name Description Type Required Platform HarmonyOS Support
children 子元素 JSX.Element No All Yes
isDisabled 是否禁用 Boolean No All Yes
_text 传给文字的参数 Object No All Yes
textValue 预设的值 String No All Yes

Menu.Option: 菜单选项

Name Description Type Required Platform HarmonyOS Support
value 值 String No All Yes
_stack 传递给stack的参数 Object No All Yes
_icon 传递给图标的参数 Object No All Yes
_text 传给文字的参数 Object No All Yes

Menu.MenuGroup: 菜单组

Name Description Type Required Platform HarmonyOS Support
title 标题 String No All Yes
children 子元素 JSX.Element No All Yes
_title 传给标题的参数 Object No All Yes

Menu.MenuOptionGroup: 菜单选项组

Name Description Type Required Platform HarmonyOS Support
type 类型（可选radio，checkbox） String No All Yes
defaultValue 默认值 String No All Yes
value 值 String No All Yes
onChange 改变事件 () => void No All Yes

Modal: 弹框

Name Description Type Required Platform HarmonyOS Support
isOpen 是否打开 Boolean No All Yes
onClose 关闭事件 () => void No All Yes
defaultIsOpen 默认打开 Boolean No All Yes
size 尺寸 String No All Yes
initialFocusRef 模态框打开时最初获得焦点的元素节点 Any No All Yes
finalFocusRef 模态框关闭时最终获得焦点的元素节点 Any No All Yes
avoidKeyboard 键盘打开，则 Modal 将向上移动相当于键盘高度 Boolean No iOS Yes
isKeyboardDismissable 控制是否可以通过触摸屏幕外部或按下系统返回键来关闭键盘和模态框 Boolean No All Yes
overlayVisible 控制模态框的背景覆盖层（overlay）是否可见 Boolean No All Yes
backdropVisible 控制模态框的背景遮罩是否可见 Boolean No All Yes
animationPreset 动画效果 String No All Yes
_backdrop 背景遮罩参数 Object No All Yes
_fade 动画参数 Object No All Yes
_slide 幻灯片动画参数 Object No All Yes
_overlay 背景覆盖层参数 Object No All Yes
useRNModal 是否使用 React Native 的原生Modal组件来实现模态框 Boolean No All Yes
_backdropFade 背景遮罩参数 Object No All Yes
closeOnOverlayClick 点击关闭 () => void No All Yes

Popover: 局部弹框

Name Description Type Required Platform HarmonyOS Support
isOpen 是否打开 Boolean No All Yes
onClose 关闭事件 () => void No All Yes
onOpen 打开事件 () => void No All Yes
placement 位置 String No All Yes
defaultIsOpen 默认打开 Boolean No All Yes
initialFocusRef 模态框打开时最初获得焦点的元素节点 Any No All Yes
finalFocusRef 模态框关闭时最终获得焦点的元素节点 Any No All Yes
isKeyboardDismissable 控制是否可以通过触摸屏幕外部或按下系统返回键来关闭键盘和模态框 Boolean No All Yes
useRNModal 是否使用 React Native 的原生Modal组件来实现局部弹框 Boolean No All Yes
trigger 手动触发显示的元素 () => void No All Yes
trapFocus 是否应该捕获焦点 Boolean No No No
crossOffset x轴偏移量 Number No All Yes
offset y轴偏移量 Number No All Yes
shouldOverlapWithTrigger 控制菜单是否与触发元素重叠显示。 boolean No All Yes
children 子元素 JSX.Element No All Yes
shouldFlip 元素渲染位置不够是否反转 Boolean No All Yes

Avatar: 显示用户头像或图像

Name Description Type Required Platform HarmonyOS Support
source 图片地址参数 Object No All Yes
size 尺寸 String No All Yes
_image 图片参数 Object No All Yes
wrapperRef 获取节点 Any No No No

Icon: 展示图标

Name Description Type Required Platform HarmonyOS Support
as 接收矢量图标 Any No All Yes
size 尺寸 String No All Yes
color 颜色 String No All Yes
name 名称 String No All Yes
viewBox icon盒子参数 String No All Yes
path icon地址 JSX.Element[] No All Yes
d SVG图标的路径 String No All Yes

Image: 图片

Name Description Type Required Platform HarmonyOS Support
source 图片地址参数 Object No All Yes
alt 未展示文字 String No All Yes
_alt 未展示文字样式参数 Object No All Yes
size 尺寸 String No All Yes
src 图片地址 String No All Yes
fallbackSource 指定当主图像源无法加载时显示的备用图像源 String No All Yes
ignoreFallback 是否忽略备用图像源 Boolean No All Yes
fallbackElement 指定当主图像源无法加载时显示的备用元素 JSX.Element No All Yes

ActionSheet: 操作表

Name Description Type Required Platform HarmonyOS Support
isOpen 是否打开 Boolean No All Yes
onClose 关闭事件 () => void No All Yes
disableOverlay 是否有遮罩 Boolean No All Yes
hideDragIndicator 是否有拖动 Boolean No All Yes
_backdrop 遮罩参数用样式 any No All Yes
useRNModal 是否使用 React Native 的原生Modal组件来实现ActionSheet Boolean No All Yes

Actionsheet.Content: 操作表内容

Name Description Type Required Platform HarmonyOS Support
_dragIndicatorWrapperOffSet 在操作表内容上方区域内容参数 Object No All Yes
_dragIndicatorWrapper 在操作表内容周围区域内容参数 Object No All Yes
_dragIndicator 拖动指示器的参数 Object No All Yes

PresenceTransition: 组件的出现和消失添加动画过渡效果

Name Description Type Required Platform HarmonyOS Support
onTransitionComplete 过渡完成事件 () => void No All Yes
initial 动画初始状态的属性 Object No All Yes
animate 动画最终状态的属性 Object No All Yes
exit 组件在隐藏时的状态 Boolean No All Yes
visible 是否打开 Boolean No All Yes
children 子集 any No All Yes
as 包裹在过渡效果中的元素的类型 any No All Yes

Stagger: 交错动画效果组件

Name Description Type Required Platform HarmonyOS Support
initial 动画初始状态的属性 Object No All Yes
animate 动画最终状态的属性 Object No All Yes
exit 组件在隐藏时的状态 Object No All Yes
visible 是否打开 Boolean No All Yes

Slide: 实现滑动动画

Name Description Type Required Platform HarmonyOS Support
in 显示隐藏 Boolean No All Yes
duration 动画时长 Number No All Yes
placement 位置 String No All Yes

FAB: 浮动按钮

Name Description Type Required Platform HarmonyOS Support
placement 位置 String No All Yes
label 文本参数 String No All Yes
icon 图标 React.Element No All Yes
renderInPortal 是否将 FAB 渲染在一个 Portal(Portal 是一种在 React 中用于将子组件渲染到父组件以外的 DOM 节点中的技术) Boolean No All Yes

Hidden: 根据colorMode或平台响应性地切换子组件的可见性值

Name Description Type Required Platform HarmonyOS Support
from 屏幕尺寸的起点，当屏幕尺寸大于等于这个起点时，组件将被隐藏 String No All Yes
till 屏幕尺寸的终点，当屏幕尺寸小于这个终点时，组件将被隐藏 String No All Yes
only 指定一个或多个特定的屏幕尺寸，只有在这些尺寸下组件才会显示，其他尺寸下将被隐藏 String No All Yes
colorMode 组件在不同颜色模式下的显示状态。NativeBase 通常支持多种颜色模式，如 light（浅色模式）、dark（深色模式）等。 React.Element No No No
platform 系统平台 React.Element No All Yes
children 子元素 React.Element No All Yes
isSSR 组件是否在服务器端渲染（SSR）环境中 Boolean No No No

KeyboardAvoidingView: 拉起键盘视图向上移动的垂直偏移量

Name Description Type Required Platform HarmonyOS Support
children 将组件渲染为 KeyboardAvoidingView 子项。接受 JSX.Element 或 JSX.Element 数组。 React.element No All Yes

Scrollview: 滚动

Name Description Type Required Platform HarmonyOS Support
children 将组件渲染为 Scrollview 子项。接受 JSX.Element 或 JSX.Element 数组。 React.element No All Yes
_contentContainerStyle 传递给内容容器样式 Object No All Yes

View: 视图

Name Description Type Required Platform HarmonyOS Support
children 将组件渲染为 Scrollview 子项。接受 JSX.Element 或 JSX.Element 数组。 React.element No All Yes

FlatList: 滚动

Name Description Type Required Platform HarmonyOS Support
_contentContainerStyle 传递给内容容器样式 Object No All Yes
ref 获取节点数据 Object No All Yes

Other：包含hooks和外用组件

Name Description Required Platform HarmonyOS Support
useDisclose 处理常见的打开、关闭或切换场景，并可以控制反馈组件，如Modal、AlertDialog、Drawer等。 NO All YES
useBreakpointValue 用于呈现分段列表的高性能接口 NO NO NO
SectionList 导出的是RN原生的SectionList，可直接用RN的SectionList NO All YES
useClipboard 使用剪贴板控件并控制将内容复制到剪贴板 NO All YES
useMediaQuery 检测单个媒体查询或多个媒体查询之间的匹配。React Native本身不支持媒体查询，因此useMediaQuery仍然有限 NO All YES
useToken 解析主题中的设计标记. NO All YES
useColorMode 设置或检索颜色模式 NO NO NO
useTheme 从上下文调用主题对象 NO All YES
useColorModeValue 基于活动颜色模式值传递的参数中检索值 NO NO NO
useContrastText 提供与作为参数传递的背景颜色的颜色对比文本颜色（lightText或darkText） NO All YES
useAccessibleColors 更新您的颜色配置，以在应用程序中获得更好的颜色和对比度可访问性。默认情况下，可访问的颜色是关闭的如果您想继续使用可访问的文本颜色，可以使用此挂钩。您还可以使用extendTheme在NativeBaseProvider的配置中传递它 NO All YES
Todo-List 用本库的组件写的案例，如有业务需要可自行编写适合的组件 NO All YES
AppBar 用本库的组件写的案例，如有业务需要可自行编写适合的组件 NO All YES
Card 用本库的组件写的案例，如有业务需要可自行编写适合的组件 NO All YES
Drawer Navigation 快速地使用 react-navigation-drawer NO All YES
Tab View 快速地使用 react-native-tab-view 文档 in NB NO All YES
Swipe List 快速地使用 react-native-swipe-list-view NO All YES
Form with Validation 用本库的组件写的案例，如有业务需要可自行编写适合的组件 NO All YES
Login/Signup Forms 用本库的组件写表单登录的案例，如有业务需要可自行编写适合的组件 NO All YES
SearchBar 用本库的组件写的搜索案例，如有业务需要可自行编写适合的组件 NO All YES
App drawer 使用FlatList创建类似应用程序抽屉的布局非常常见，如有业务需要可自行编写适合的组件 NO All YES
Footer 用本库的组件写的Footer案例，如有业务需要可自行编写适合的组件 NO All YES

遗留问题

其他

  • 网站文档图标要用@expo/vector-icons（需要用到expo脚手架才可以），如果没有用到expo脚手架的可以用react-native-vector-icons 文档平替
  • Tooltip 当用户与元素交互时，工具提示会提供简短的信息性消息。工具提示的启动方法包括：通过鼠标悬停手势或键盘悬停手势。这个组件是在web端用的
  • AlertDialog警告弹框动画在升级RN新架构后会有闪动现象，该场景在ios和android上有相同表现。
  • 在api<=13的rom手机中，系统的TextInput设置enabled为false，设置fontcolor功能有异常，问题现象是，TextInput的文字颜色是灰色，并不是设置的fontColor,导致本库以下功能失效：
    1. input设置isReadOnly为true时，设置文字颜色不生效
    2. select自定义控件，设置color属性不生效

目录结构

/rntpc_nativebase            # 项目根目录
├── src                      # RN / JS 源码
│   ├── index.tsx            # 入口文件
│   ├── components           # 组件
│   │   ├── basic            # FlatList、ScrollView、View 等
│   │   ├── composites       # AspectRatio、Modal、Toast 等复合组件
│   │   ├── primitives       # Box、Button、Input 等基础组件
│   │   └── types            # 组件类型定义
│   ├── core                 # NativeBaseProvider、主题扩展等
│   ├── hooks                # hooks
│   ├── theme                # 主题
│   ├── factory              # 组件工厂
│   └── utils                # 工具方法
├── example                  # 示例工程
├── RNBareExample            # Bare 示例工程
├── expo-example             # Expo 示例
├── next-example             # Next.js 示例
├── img                      # 图片资源
├── README.md                # 中文文档
├── README_en.md             # 英文文档
├── package.json             # 包配置
└── LICENSE                  # 开源协议

贡献代码

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

开源协议

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

项目介绍

基于 NativeBase 的 OpenHarmony 适配版，功能丰富的 React Native UI 组件库

MIT TSX6.36 K提交数typescriptiosreactopenharmony
定制我的领域
README
规则集
Code of conduct