# 导航栏 NavBar

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/nav-bar
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

为页面提供全局性的导航功能。

## 安装

```bash
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` |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt