组件概览
按使用场景分组的组件索引。所有组件都从包根 barrel 导出 —— import { Button, Cell, useColors } from '@unif/react-native-design',不要深路径。每个组件一个独立文档页(Props 表 + Tokens 表 + 可交互 <LiveDemo>),点名称进入。
逐组件 API 在各组件页
本页只做索引,不镜像每个组件的完整 API。点进各组件页查 Props / variant / size;AI 可按需 fetch 远程 llms.txt / 单组件 md/components/<name>.md。
聊天专属组件(Message / PromptInput / Suggestion / Reasoning 等)在 portal 仓库文档站维护,不在本表。其总纲见完整规范 → Component library。
品牌
| 组件 | 说明 |
|---|---|
| Logo | 品牌标识(<Image> 包装 assets/logo.png) |
| 图标 Icon | 24×24 描边 SVG 目录,<Icon name="..." /> |
通用
| 组件 | 说明 |
|---|---|
| Button | 主操作按钮,6 variant × 3 size,可 block |
| IconButton | 纯图标按钮,accessibilityLabel 类型必填 |
| Avatar | 单字符 monogram 头像,variant brand/info/soft/neutral |
| Tag | 状态徽章,5 语义 × 2 尺寸 |
| Chip | 胶囊形可选中 pill(Suggestion 底层) |
| Confirm | 命令式 confirm() + <ConfirmHost /> 高风险二次确认 |
| Thumbnail | 16:9.5 缩略图,sm / md / lg 三档 |
| Loading | Spinner(reanimated 4 旋转)+ 线性进度 |
| Pulse | usePulse + <Pulse> + <PulseDot>,通用脉冲底座 |
| Reveal | 入/出场淡入容器,收口 reanimated layout 动画的 web 特化 |
| StatusDot | done/active/pending 圆点,flat/soft 双 tone |
表单
| 组件 | 说明 |
|---|---|
| Input | 单行输入,idle / focus / filled / error |
| PasswordInput | Input + secureTextEntry + 明文切换 |
| Textarea | 多行输入(复用 Input,顶对齐) |
| TextField | 带 label / 校验的表单字段封装 |
| Search | 搜索条(Input 预设 + 清除按钮) |
| Checkbox | 复选 |
| Radio | 单选 + RadioGroup |
| Switch | 开关(reanimated 4 worklet) |
| Stepper | [−] N [+] 步进 |
| Form | Form / FormGroup / FormRow(行间 hairline) |
导航
| 组件 | 说明 |
|---|---|
| NavBar | 固定顶部头,44px,default / brand variant |
| TabBar | 固定底部 tab,50px,带 badge |
| Tabs | 页级下划线 tabs(局部分段用 Segmented) |
Drawer 用
DrawerHeader+@react-navigation/drawer组合,无独立组件页。
反馈
| 组件 | 说明 |
|---|---|
| Toast | 命令式 toast() + <ToastHost /> 全局轻提示 |
| Empty | 空状态 |
| Skeleton | 骨架占位,shape='line'/'rect'/'circle'(走 usePulse) |
数据展示
| 组件 | 说明 |
|---|---|
| Cell · List | 列表行 + List 容器,grouped(白卡 + gap)/ flush(hairline)两模式 |
| Card | 内容卡,default / plain(flat 已 deprecated 等价 plain) |
| Grid | 九宫格图标网格 |
| Carousel | 轮播(包装 reanimated-carousel v5) |
业务复合
@unif/react-native-design 暴露的通用业务复合组件(耦合 navigation / store 的留在消费者仓库):
| 组件 | 说明 |
|---|---|
| AvatarWithRing | 圆形头像 + ring + 品牌 shadow |
| GlassStats | 玻璃数据条(BlurView + N 列) |
| Decorations | GradientWash + RadialHalo + ScreenBackdrop(整屏沉浸渐变,暖橙 preset + 暗色自适配) |
| VersionPill | 版本号药丸 |
其他
| 组件 | 说明 |
|---|---|
| BlurLayer | BlurView + tint 双层,intensity soft(10)/ strong(40) |
| EntryCard | 横向小卡入口(Me 屏"设置 / 关于"双列) |
基础令牌
颜色 / 字体 / 间距 / 圆角 / 阴影 / 动效 / 图标 → 设计令牌。
组件页统一结构
每个组件文档页遵循:
- LiveDemo 预览 —— 可交互的实时演示(
<LiveDemo>)。 - Props 表 —— 完整 API 参数(prop · 类型 · 默认 · 说明)。
- Tokens 表 —— 该组件实际读取的设计令牌:
| Token | 来源 | 作用 |
|---|---|---|
c.primary | useColors() | 主按钮背景色 |
radius.md | @unif/react-native-design | 中等圆角 |
s.brandLg | useThemedStyles 第二参 | 品牌卡片阴影 |
Token 来源说明:
useColors()—— 运行期主题色,随亮 / 暗自动切换(ColorTokens)。space.*/radius.*/type.*/fw.*—— 静态 token,直接 import。- shadow 参数(
s.*)——useThemedStyles((c, s) => ...)第二参,暗色下大多数趋零。
参考实现:Button 与 Cell · List。