@unif/react-native-ui

UNIF React Native 基础 UI 组件库 — 提供原子、基础、复合三层组件体系。

安装

npm install @unif/react-native-ui
# 或
yarn add @unif/react-native-ui

使用

import { Button, Input, Avatar, ListItem, tokens } from '@unif/react-native-ui';

<Button title="提交" onPress={handleSubmit} />
<Input placeholder="请输入..." onChangeText={setText} />
<Avatar name="张三" size={40} />

组件列表

布局

| 组件 | 说明 | |------|------| | Row | 水平布局容器 | | Column | 垂直布局容器 | | Center | 居中布局容器 | | Space | 间距组件 |

原子 (Atom)

| 组件 | 说明 | |------|------| | Text | 文本组件 | | Touchable | 触摸反馈容器 | | Divider | 分割线 | | Avatar | 头像 | | WaveAnimation | 波形动画 |

基础 (Base)

| 组件 | 说明 | |------|------| | Button | 按钮 | | Input | 输入框（含 toolbar 插槽） | | Chip | 标签/筹码 | | Popover | 气泡弹出层 | | ActionSheet | 操作面板 |

复合 (Composite)

| 组件 | 说明 | |------|------| | ListItem | 列表项（thumb + title + extra 布局） |

主题

通过 configure() 自定义 token，通过 tokens 访问当前主题值：

import { configure, tokens } from '@unif/react-native-ui';

configure({ colorPrimary: '#1890FF' });

语义样式

每个组件支持 styles prop 进行语义化样式覆盖：

<Button
  title="确定"
  styles={{ root: { borderRadius: 20 }, title: { fontSize: 16 } }}
/>

兼容性

| @unif/react-native-ui | React Native | React | 状态 | |------------------------|-------------|-------|------| | 0.1.x | >= 0.71 | >= 18 | ✅ | | 0.1.x | 0.74.x | 18.x | ✅ 已验证（PECPortal） | | 0.1.x | 0.81.x | 19.x | ✅ 已验证（example app） |

API 兼容说明

• Pressable: RN >= 0.63 ✅
• StyleSheet.compose: RN >= 0.66 ✅

Contributing

• Development workflow
• Sending a pull request
• Code of conduct
• Testing strategy

License

MIT