1.创建 组件

src/components/TabBar/index.js

/** * TabBar 组件 */import React ,{ PureComponent } from 'react';import classNames from 'classnames';import { Link } from 'react-router-dom';import {menuData} from '../../common/menu';import 'antd-mobile/lib/tab-bar/style/index.css';import 'antd-mobile/lib/badge/style/index.css';import Styles from './index.less';class WxTabBar extends PureComponent {  state = {    selectedTab: 'home',    hidden: false  }  changeTab = (tab) => {    this.setState({      selectedTab: tab    })  }  // 监听 props 的变化  componentWillReceiveProps(nextProps){    let pathName = nextProps.location.pathname;    if(pathName === '/home' || pathName === '/classify' || pathName === '/shopcar' || pathName === '/me'){      this.setState({        hidden:false,        selectedTab:pathName.substring(1)      });    }else{      this.setState({        hidden:true      });    }  }  render(){    return (      
     
        
      
                 {            menuData.map(item => (              
       
                
                          
        
                    
                               {                        this.state.selectedTab === item.key?                        
          
                        :                        
          
                      }                      {/* 1 */}                                      
        
                  
        
{item.name}
                              
       
            ))          }        
      
      
     
    )  }}export default WxTabBar;

样式

index.less

.container{  position: fixed;  left: 0px;  bottom: 0px;  width: 100%;  background-color: #fff;  box-sizing: border-box;}

菜单

src/common/menu.js

/** * 菜单栏 数据 */// 主页import home1 from '../assets/home1.png'import home2 from '../assets/home2.png'// 分类import sort1 from '../assets/sort1.png'import sort2 from '../assets/sort2.png'// 购物车import shopcar1 from '../assets/shopcar1.png'import shopcar2 from '../assets/shopcar2.png'// 我的import me1 from '../assets/me1.png'import me2 from '../assets/me2.png'/**  * tabbar菜单 */const menuData = [  {    name:'主页',    key:'home',    path:'/home',    icon: home1,    selectedIcon:home2,    unselectedTintColor:"#949494",    tintColor:"#33A3F4",  },  {    name:'分类',    key:'classify',    path:'/classify',    icon: sort1,    selectedIcon:sort2,    unselectedTintColor:"#949494",    tintColor:"#33A3F4",  },  {    name:'购物车',    key:'shopcar',    path:'/shopcar',    icon: shopcar1,    selectedIcon:shopcar2,    unselectedTintColor:"#949494",    tintColor:"#33A3F4",  },  {    name:'我的',    key:'me',    path:'/me',    icon: me1,    selectedIcon:me2,    unselectedTintColor:"#949494",    tintColor:"#33A3F4",  },]export {  menuData}

2.页面调用

3.效果图