umi + antd-mobile 封装底部 tabbar

1.配置路由

routes: [
    {
      path: '/', component: '@/pages/layouts/index',  // layouts页面
      routes: [
        { path: '/home', component: '@/pages/home' }, // 首页
        { path: '/mine', component: '@/pages/mine' }, // 个人中心
      ]
    }
  ],

2.layouts页面代码

import React, { Component } from 'react'
import TabBar from '@/pages/components/TabBarNav';  // 底部tabbar组件
import { history } from 'umi';

const ULR_NO_LAYOUT = ['/', '/home', '/mine'];  // 判断在哪几个路由下需要出现底部导航

class Index extends Component {
  componentDidMount() {
  }
  renderBody = () => {
    const { location: { pathname }, children } = this.props;
    if (ULR_NO_LAYOUT.includes(pathname)) {  // 需要tabbar的页面
      return (<TabBar {...this.props} />);
    }
    return (
      <React.Fragment>
        {children}
      </React.Fragment>
    );
  }

  render() {
    return (
      <React.Fragment>
        {this.renderBody()}
      </React.Fragment>
    )
  }
}

export default Index;

3. tabbar组件

import React , { useState }  from "react";
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import s from './../../index.less'  // 定位到底部样式
import { history } from 'umi';

const TabBar: React.FC = (props: any) => {
  const [activeKey, setActiveKey] = useState(history.location.pathname.split('/')[1])
  
  const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: <AppOutline />,
      link:'/home'
    },
    {
      key: 'mine',
      title: '个人中心',
      icon: <UserOutline />,
      link:'/mine'
    },
  ]
  const InfoActiveKey = (e: string) =>{
    setActiveKey(e)
    let InfoActiveKeyData = tabs.filter(item => item.key.includes(e) )
    history.replace(InfoActiveKeyData[0].link);
  }
  return (
   <div>
      {props.children}  // 显示子路由页面
      <div className={s.bottomName}>
        <TabBar
          activeKey={activeKey} onChange={InfoActiveKey}
        >
          {tabs.map(item => {
            return (
              <TabBar.Item
                key={item.key}
                icon={item.icon}
                title={item.title}
                badge={item.badge}
              />
            )
          })}
        </TabBar>
      </div>
    </div>
  )
}
export default TabBar;

umi官网路由说明：