标签栏 TabBar
页面底部导航标签。
安装
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 的 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 实现，或者自行用 CSS 实现。