跳到主要内容

TabBar 底部 tab 栏

固定底部主导航 · 50px 高 · 各 tab icon + 文字 垂直居中。

实时预览​

下方渲染的就是 src/components/ui/TabBar/TabBar.tsx 本体，通过 react-native-web 翻译成浏览器节点。

当前页面
首页

视觉规范​

元素规则
高度50px
背景#FFFFFF
顶部边线1px hairline #EDEDED
Tab 项flex: 1，垂直居中 icon + 文字
Icon22×22，fg-3 #999 (默认) / primary-300 #EB6E00 (active)
文字10px / 500，与 icon 同色
Badge小红点或数字徽章，叠在 icon 右上
安全区bottom inset (iOS home indicator 34px) 不计入 50px

用法​

import { TabBar } from '@unif/react-native-design';

<TabBar
  active="home"
  onChange={setActive}
  items={[
    { id: 'home',     icon: 'home',     label: '首页' },
    { id: 'visits',   icon: 'location', label: '拜访', badge: 3 },
    { id: 'agent',    icon: 'spark',    label: 'AI' },
    { id: 'me',       icon: 'user',     label: '我的' },
  ]}
/>

不要​

  • ❌ 不要做 5 个以上 tab——超过就用左侧 Drawer
  • ❌ 不要在 active 状态用其他颜色——必须主橙
  • ❌ 不要在 TabBar 里加按钮（"发布"等）——用单独的 FAB 或 NavBar 右槽