跳到主要内容

组件概览

按使用场景分组。所有组件均已在 RN 中实现。每个组件一个文件夹,导出统一通过 @/components/ui barrel。

聊天专属组件 不在本表,请看 Chat 概览

品牌

组件状态RN 路径
Logosrc/components/ui/Logo/

通用

组件状态RN 路径
Buttonsrc/components/ui/Button/
Avatarsrc/components/ui/Avatar/
Tagsrc/components/ui/Tag/
Chipsrc/components/ui/Chip/(pill 圆角,可选中;Suggestion 底层)
Loadingsrc/components/ui/Spinner/
Pulse · PulseDotsrc/components/ui/Pulse/(reanimated 4 worklet 通用脉冲)
StatusDotsrc/components/ui/StatusDot/(done/active/pending 圆点)

表单

组件状态RN 路径
Inputsrc/components/ui/Input/
PasswordInputsrc/components/ui/PasswordInput/(Input + secureTextEntry + eye toggle,4 处 caller 复用)
Searchsrc/components/ui/Search/
Checkboxsrc/components/ui/Checkbox/
Radiosrc/components/ui/Radio/
Switchsrc/components/ui/Switch/
Steppersrc/components/ui/Stepper/
Formsrc/components/ui/Form/

导航

组件状态RN 路径
NavBarsrc/components/ui/NavBar/
TabBarsrc/components/ui/TabBar/
Tabssrc/components/ui/Tabs/(页级下划线)+ src/components/ui/Segmented/(局部分段)
Drawersrc/components/ui/DrawerHeader/ + @react-navigation/drawer

反馈

组件状态RN 路径
Toastsrc/components/ui/Toast/toast.ts imperative + ToastHost.tsx
Confirmsrc/components/ui/Confirm/confirm() imperative + ConfirmHost.tsx,高风险确认弹窗)
Emptysrc/components/ui/Empty/
Skeletonsrc/components/ui/Skeleton/(单一组件 + shape='line'/'rect'/'circle',走 usePulse

数据展示

组件状态RN 路径
Cell · Listsrc/components/ui/Cell/
Cardsrc/components/ui/Card/(default / plain;flat 已 deprecated 等价 plain
Gridsrc/components/ui/Grid/
Carouselsrc/components/ui/Carousel/(包装 reanimated-carousel v5 beta)

反馈(弹层壳)

组件状态RN 路径
BlurLayersrc/components/ui/BlurLayer/(BlurView + tint 双层,intensity 'soft'(10) / 'strong'(40))
BottomSheetsrc/components/ui/BottomSheet/(纯 layout 容器,配合 presentation: 'transparentModal' 路由屏)

业务复合

业务复合组件在 @/components/business,封装了 navigation / 安全区 / 主题上下文,把屏级骨架收成一行声明:

组件状态RN 路径说明
ScreenLayoutsrc/components/business/ScreenLayout/二级屏布局(SafeAreaView + NavBar + 双色背景)
CellListsrc/components/business/CellList/数据驱动的 Cell 列表(items 数组)
AvatarWithRingsrc/components/business/AvatarWithRing/圆形头像 + ring + 品牌 shadow
GlassStatssrc/components/business/GlassStats/玻璃数据条(BlurView + N 列)
Decorationssrc/components/business/Decorations/GradientWash 线性渐变 + RadialHalo 径向柔光 + ScreenBackdrop 整屏沉浸渐变(preset 暖橙 + 暗色自适配)
Thumbnailsrc/components/ui/Thumbnail/列表 / 卡片 / chat 通用 16:9.5 缩略图(sm 64×40 / md 113×67 / lg 160×96)
ModernAppCellsrc/components/business/ModernAppCell/46×46 r13 应用图标 tile(IconName / imageUrl 双轨 · tint 透传 · badge)
SmsCodeInputsrc/components/business/SmsCodeInput/Input + sendSms + isMobile 校验 + 60s 倒计时,3 处 caller 复用

横向小卡入口(Me 屏底部"设置 / 关于"双列)看 EntryCard(在 ui 层,不在 business)。

会话列表用 <List> + <Cell variant="assistant" /> 直接渲染(icon 玻璃感 + 标题 + badge + 时间 + 预览全在 Cell.assistant 里),不再单独抽 AssistantChatRow 组件。

基础令牌

颜色 / 字体 / 间距 / 圆角 / 阴影 / 动效 / 图标 → 设计令牌