NavBar 导航栏

顶部导航 · 44px 高 · 三变体：default 白底 hairline · brand 品牌橙底白字 · transparent 透明无边框 + 深字（c.foreground，用于浮在浅色 hero 渐变之上的子页）。

实时预览

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

默认 · 含副标题

AI 助手

在线 · 已同步

品牌橙底 · variant="brand"

透明无边框 · variant="transparent"（深字，浮在浅色 hero 渐变上）

我的名片

用法

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

<NavBar
  title="AI 助手"
  subtitle="在线 · 已同步"
  left={{ icon: 'menu', onPress: openDrawer }}
  right={{ icon: 'more-h' }}
/>

{/* 品牌橙底 */}
<NavBar title="登录" variant="brand" />

{/* 透明浮层（深字）—— 浮在浅色 hero 渐变之上的子页 */}
<NavBar title="我的名片" variant="transparent" left={{ icon: 'arrow-left', onPress: goBack }} />

API

Prop	Type	默认	说明
`title`	`string`	—	居中标题
`subtitle`	`string?`	—	副标题（小字号，主标题下方）
`left`	`ReactNode \| { icon, onPress, accessibilityLabel? }`	—	左槽，传 config 自动用 Slot 渲染
`right`	`ReactNode \| { icon, onPress, accessibilityLabel? }`	—	右槽，同 `left`
`variant`	`'default' \| 'brand' \| 'transparent'`	`'default'`	视觉变体：`default` 白底 hairline + 深字 / `brand` 品牌橙底 + 白字 / `transparent` 透明无边框 + 深字 `c.foreground`（浮在浅色 hero 上；若需白字深色浮层后续加 `transparentLight`）
`testID`	`string?`	—	E2E 定位

left / right 传 config 对象时渲染为内部 IconButton（variant='ghost'，icon 色按 variant tint：brand 用 c.onPrimary、其余 c.foreground）；传 ReactNode 则原样渲染。标题用 t.h3 + 0.5 / fw.semi / letterSpacing: -0.2，副标题 t.micro（11）。

安全区（Safe Area）

NavBar 不内置 top safe-area inset，由宿主页面负责。推荐做法：

import { SafeAreaView } from 'react-native-safe-area-context';

// 方式 A：SafeAreaView 包裹
<SafeAreaView edges={['top']}>
  <NavBar title="首页" />
</SafeAreaView>

// 方式 B：react-navigation Stack.Screen header 配置
// headerStatusBarHeight 会自动注入 inset，无需手动包裹

这样 NavBar 本体可在任何场景复用（modal、底部抽屉 header、全屏画中画等不需要 top inset 的场景）。

无障碍（a11y）

来源：src/components/ui/NavBar/NavBar.tsx、types.ts。

默认 accessibilityRole：NavBar 根 <View> 未设置 role（无 header 等），title / subtitle 渲染为普通 <Text>，按文本默认对 SR 可读。
a11y props：left / right 槽传 config 对象时由内部 IconButton 渲染，其 accessibilityLabel 在 NavBarSlotConfig 中可选但强烈建议传——缺省时 dev 下告警且 SR 回退读英文 icon 名（体验不佳）。若 left / right 直接传 ReactNode，则 a11y 由该节点自行负责。
状态语义：NavBar 自身无可切换状态，不附加 accessibilityState。

// accessibilityLabel 可选但强烈建议传，请传人类可读短语
<NavBar
  title="登录"
  left={{ icon: 'arrow-left', onPress: goBack, accessibilityLabel: '返回' }}
  right={{ icon: 'more-h', onPress: openMenu, accessibilityLabel: '更多' }}
/>

实时预览​

用法​

API​

安全区（Safe Area）​

无障碍（a11y）​

实时预览

用法

API

安全区（Safe Area）

无障碍（a11y）