react 自定义 TabBar 组件

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 (
      <div style={{'display': this.state.hidden ? 'none' : 'block'}} className={classNames({
        'am-tabs-tab-bar-wrap':true,
      },Styles.container)}>
        <div className="am-tab-bar-bar" style={{backgroundColor:"white"}}>
          {
            menuData.map(item => (
              <div key={item.key} className="am-tab-bar-tab">
                <Link to={item.path} onClick={this.changeTab.bind(this,item.key)}>
                  <div className="am-tab-bar-tab-icon">
                    <span className="am-badge am-tab-bar-tab-badge tab-badge">
                      {
                        this.state.selectedTab === item.key?
                        <div style={{width: "22px", height: "22px", background: `url(${item.selectedIcon}) center center / 21px 21px no-repeat`}}></div>
                        :
                        <div style={{width: "22px", height: "22px", background: `url(${item.icon}) center center / 21px 21px no-repeat`}}></div>
                      }
                      {/* <sup className="am-badge-text">1</sup> */}
                    </span>
                  </div>
                  <p className="am-tab-bar-tab-title" style={{color: this.state.selectedTab === item.key?item.tintColor:item.unselectedTintColor}}>{item.name}</p>
                </Link>
              </div>
            ))
          }
        </div>
      </div>
    )
  }
}
 
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.页面调用

<WxTabBar {...this.props} />

3.效果图