下面我们来写一个tabbar 组件 （antd-mobiel 有这样的组件）
首先我们需要在src 新建一个目录 为components （放置我们的组件） 并创建index.js ->为了将我们的组件统一导出。
创建 Tabbar 文件夹， 并且在目录下创建index.js ->来构建我们的组件内容
在components 的index中导出组件
export { default as Tabbar} from './Tabbar.js'
为了动态渲染tabbar ，需要在routes.js的每个路由下面配置 icon text 等数据方便渲染
准备工作 ->
从 iconfont 来找到自己想要的图标
生成代码后我们吧代码复制到 tabbar.less 中。
并复制每个图标的代码 添加到routes中对应的页面中去。 我们遍历数组需要 设置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路径'传递配置的路径参数，也可以通过 组件传参的方式 在App 中 的Tabbar 标签处传递参数
在我们渲染的时候 如果 isNav 为true 时才要生成tabbar
所以传递的参数应该是
import { Tabbar } from './components'
const tabbarRoutes = routes.filter(route => route.isNav === true)
<footer>
<Tabbar routes = {routes}/>
</footer>
此时 我们在Tabbar 界面进行 打印的时候 ，浏览器会打印出
实现点击效果有两种方式 一种是 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>
)
}
}
这样就可以实现路由跳转。 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;
}
}
}
}
第二种方式
第二张方式不需要引入 react-router-dom
class Tabbar extends Component {
// static getDerivedStateFramProps (props){ 第一种方式通过外面传来的参数来进行操作
// 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
>https://www.jianshu.com/p/2bda61916d11
