导航栏 NavBar
为页面提供全局性的导航功能。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 DemoBlock 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。
为页面提供全局性的导航功能。
何时使用
需要显示当前页面内容的标题和操作。
示例
NavBar
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| back | 返回区域的文字，如果为 null 的话，backIcon 也不会渲染 | ReactNode | null | '' |
| backIcon | 是否显示返回区域的箭头，也可以传入 ReactNode 进行自定义 | boolean | ReactNode | true |
| children | 标题 | ReactNode | - |
| left | 左侧内容，渲染在返回区域的右侧 | ReactNode | - |
| onBack | 点击返回区域后的回调 | () => void | - |
| right | 右侧内容 | ReactNode | - |
CSS 变量
| 属性 | 说明 | 默认值 |
|---|---|---|
| --border-bottom | 导航栏下边框 | none |
| --height | 导航栏高度 | 45px |