# 标签栏 TabBar

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/tab-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。

页面底部导航标签。

## 何时使用

适用于在不同页面之间进行切换。

## 示例

## TabBar

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| activeKey | 当前激活 `item` 的 `key` | `string \| null` | - |
| defaultActiveKey | 初始化选中 `item` 的 `key`，如果没有设置 `activeKey` | `string \| null` | 第一个 `TabBar.Item` 的 `key` |
| onChange | 切换面板的回调 | `(key: string) => void` | - |
| safeArea | 是否开启安全区适配 | `boolean` | `false` |

## TabBar.Item

### 属性

| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| badge | 徽标，同 [Badge](/zh/components/badge) 的 `content` 属性 | `React.ReactNode \| typeof Badge.dot` | - |  |
| icon | 图标 | `ReactNode \| ((active: boolean) => ReactNode)` | - |  |
| key | 对应 `activeKey` | `string` | - |  |
| title | 标题 | `ReactNode \| ((active: boolean) => ReactNode)` | - |  |
| onClick | 点击事件的回调 | `() => void` | - | 5.38.0 |

## FAQ

### TabBar 为什么不能固定在页面底部？

不同业务项目中的布局逻辑是不一样的，TabBar 本身是不含定位和外层布局相关的逻辑的，需要业务项目中配合 [Popup](/zh/components/popup) 实现，或者自行用 CSS 实现。

---

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