React——Ant Design Mobile的TabBar标签栏的简单使用（配合路由）

原创已于 2023-03-08 10:03:58 修改 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2023-02-17 16:37:09 首次发布

文章讲述了在使用react-router-dom不同版本时可能遇到的API不兼容问题，特别是在实现TabBar组件时。作者给出了一个使用版本为react-router-dom的示例，其中引入了BrowserRouter、RouteList和自定义TabBar组件。TabBar组件通过useNavigate和useLocation从react-router-dom获取导航功能，同时使用antd-mobile的TabBar组件并自定义样式来创建底部导航栏。

react-router-dom不同版本的API有些不同，可能会出现一些bug，这里用的版本是：

在App.js中引入路由和TabBar组件

import './App.css';

// 引入路由组件
import { BrowserRouter as Router } from 'react-router-dom'
//引入自定义TabBar组件
import Tabbar from './components/tabbar/Tabbar';

// 引入自定义路由组件
import RouteList from './routers'

function App() {
  return (
    <div className="App">
      <Router>
        <RouteList></RouteList>
        <Tabbar></Tabbar>
      </Router>
    </div>
  );
}

export default App;

TabBar组件

import React from 'react'
import './Tabbar.css'
// 引入tabbar组件
import { TabBar } from 'antd-mobile'
// 引入路由组件
import {
    //版本不同API会有差别
    useNavigate,
    useLocation,
} from 'react-router-dom'
// 引入图标组件
import {
    AppOutline,
    MessageOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

// TabBar 配置
const tabs = [
    {
        url: '/home',
        title: '首页',
        icon: <AppOutline />,
    },
    {
        url: '/todo',
        title: '待办',
        icon: <UnorderedListOutline />,
    },
    {
        url: '/message',
        title: '消息',
        icon: <MessageOutline />,
    },
    {
        url: '/me',
        title: '我的',
        icon: <UserOutline />,
    }
]

const Bottom = () => {
    const navigate= useNavigate()
    const { pathname } = useLocation()
    return (
        <TabBar activeKey={pathname} onChange={value => navigate(value)}>
            {tabs.map(item => (
                <TabBar.Item key={item.url} icon={item.icon} title={item.title} />
            ))}
        </TabBar>
    )
}

export default function Tabbar() {
    return (
        <div className='tab-bar'>
            <Bottom />
        </div>
    )
}

antd-mobile中TabBar标签栏没有样式，需要自己添加样式

.tab-bar {
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}