NavBar 导航栏

顶部导航 · 44px 高 · 默认 / 品牌橙底 / 透明浮层。

实时预览

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

默认 · 含副标题

AI 助手

在线 · 已同步

品牌橙底 · variant="brand"

登录

透明浮层 · variant="transparent"（相机 / 地图场景）

扫一扫

用法

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

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

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

{/* 相机 / 地图浮层 */}
<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'	视觉变体：白底 hairline / 品牌橙底白字 / 透明白字
testID	string?	—	E2E 定位