下面我們來寫一個tabbar 組件 （antd-mobiel 有這樣的組件）

首先我們需要在src 新建一個目錄 為components （放置我們的組件） 并創(chuàng)建index.js ->為了將我們的組件統(tǒng)一導出。

創(chuàng)建 Tabbar 文件夾， 并且在目錄下創(chuàng)建index.js ->來構建我們的組件內容

目錄結構圖片

在components 的index中導出組件

export { default as Tabbar} from './Tabbar.js'

為了動態(tài)渲染tabbar ，需要在routes.js的每個路由下面配置 icon text 等數(shù)據(jù)方便渲染

準備工作 ->
從 iconfont 來找到自己想要的圖標

這是我的項目要用到的圖標

生成代碼后我們吧代碼復制到 tabbar.less 中。
并復制每個圖標的代碼 添加到routes中對應的頁面中去。 我們遍歷數(shù)組需要 設置isNav 來 判斷是否要渲染為tabbar 則此時我的 routes如下

import {
  Home, Mall, Detail, Cart, Mine, Login, NoPages
} from './pages'

const routes = [{
  path: '/home',
  text: '首頁',
  isNav: true,
  icon: '',
  component: Home
}, {
  path: '/mall',
  text : '商城',
  isNav: true,
  icon: '',
  component: Mall
}, {
  path: '/mine',
  text: '我的',
  isNav: true,
  icon: '',
  component: Mine
}, {
  path: '/cart',
  text: '購物車',
  isNav: true,
  icon: '',
  component: Cart
}, {
  path: '/login',
  component: Login
}, {
  path: '/mall/detail/:id',
  isNav: false,
  component: Detail
}, {
  path: '/404',
  isNav: false,
  component: NoPages
}
];
export default routes

在我們要渲染的界面導入Tabbar 并且在 底部引用
我們可以通過import routes from '你的routes路徑'傳遞配置的路徑參數(shù)，也可以通過 組件傳參的方式 在App 中 的Tabbar 標簽處傳遞參數(shù)
在我們渲染的時候 如果 isNav 為true 時才要生成tabbar
所以傳遞的參數(shù)應該是

import { Tabbar } from './components'
const tabbarRoutes = routes.filter(route => route.isNav === true)


         <footer>
           <Tabbar routes = {routes}/>
         </footer>

此時 我們在Tabbar 界面進行 打印的時候 ，瀏覽器會打印出

瀏覽器會打印出isNav為true的routes列表

實現(xiàn)點擊效果有兩種方式 一種是 Link 一種是 history

先寫

第一種方式 NavLink

在Tabbar中

import React, { Component } from 'react'
import { NavLink as Link } from 'react-router-dom'
import './tabbar.less'
export default class Tabbar extends Component {
render() {
  console.log(this.props)
  return (
    <div className = "m-tabbar">
      {
        this.props.routes.map(route => {
          console.log(route)
          return(
            <Link 
            key={route.path} 
            to = {route.path} 
            className = 'tabbaritem'>

            <span 
            dangerouslySetInnerHTML = {{ __html: route.icon }}
            className = 'icon'
            ></span>

            <div className = "title" >{route.text}</div>
            </Link>
          )
        })
      }
    </div>
  )
}
}

這樣就可以實現(xiàn)路由跳轉。 to是你要跳轉到的頁面
為了樣式的美觀 可以為路由加上 樣式 我們寫在 tabbar.less 中
我們需要在文件中 引入 生成的icon代碼 @font-face
并把顯示icon 的span 的font-family 設置為 iconfont

@font-face {
//引入iconfont
  font-family: 'iconfont';  /* project id 943948 */
  src: url('//at.alicdn.com/t/font_943948_pcz8qvoxvxi.eot');
  src: url('//at.alicdn.com/t/font_943948_pcz8qvoxvxi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_943948_pcz8qvoxvxi.woff') format('woff'),
  url('//at.alicdn.com/t/font_943948_pcz8qvoxvxi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_943948_pcz8qvoxvxi.svg#iconfont') format('svg');
}
.m {
  &-tabbar{
    background-color: #f1f1f1;
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    justify-content: space-around;
    .tabbaritem{
      .icon{
        font-family: 'iconfont';
//將span 的font-family 改成 icon
        color: #666666;
        font-size: 16px;
      }
      .title{
        margin-top:2vw;
        color: #666666;
      }
    }
    .active{
      .icon{
      color: #c81c28;
      }
      .title{
      color: #c81c28;      
      }
    }
  }
}

tabbar顯示后如圖

第二種方式

第二張方式不需要引入 react-router-dom

class Tabbar extends Component {
    // static getDerivedStateFramProps (props){  第一種方式通過外面?zhèn)鱽淼膮?shù)來進行操作
    //     return {
    //         currentTab: props.routes[0].path
    //     }
    // }
    // constructor(props){
    //     super(props);
    //     this.state = {
    //         currentTab : ''
    //     }
    // }
   onItemClick = (path) =>{
    this.props.history.push(path);
    // console.log(this.props);
   }
   render() {
      const currentPath = this.props.location.pathname;
      // console.log(currentPath);
      const detail = '/detail'
      // console.log(currentPath.indexOf(detail));
      if(currentPath.indexOf(detail)=== -1){
    return (

      <div className = "ani-tabbar ">
      {
          this.props.routes.map(route =>{
            const cls = (route.path === currentPath) ? 'ani-tabbar-item active' : 'ani-tabbar-item'
            //   const csl = route.path === this.state.currentTab
           return (
            <div 
            key = {route.path}
             className={cls}
             onClick = {this.onItemClick.bind(this,route.path)}
              >
              {/* {this.getIcon(route.path)} */}
            <span className='icon' dangerouslySetInnerHTML = {{__html : route.icon}}></span>
            <span className= "text">{route.title}</span>
            </div>
           ) 
        })
      } 
      </div>
    )}
    else{
      return (<div></div>)
    }
  }
    
}

完成工作后需要進行代碼提交 用git git 可以在完成之前用
feat : xxxxxx
修復bug 用
fix： xxxxxx

下面我們要配置redux及 axios
>http://www.itdecent.cn/p/2bda61916d11