React 组件封装之 TabBottom 底部导航

一、TabBottom 底部导航

组件说明：
实现底部 tab 切换。

效果展示：
底部 tab 切换，改变激活样式，切换到对应的页面

二、使用案例

import {TabBottom} from 'share';
import React from 'react';
export default class Example extends React.Component {
    constructor(props) {
        super(props);
    }
    onTabClick(){
    }
    render(){
      return  <TabBottom history={this.props.history} defaultTab={1} onClick={()=>this.onTabClick()}/>
    }
}

三、API 使用指南

属性	说明	类型	默认值
history	将父组件的history传递到子组件	Object	无
defaultTab	默认选中的tab	string	1
onClick	点击tab触发的事件	(e: Object): void	空函数
tabList	数组，将底部的tab名称，路由等信息组合到tabList	Array	[]

tabList 属性

属性	说明	类型	默认值
title	底部的tab文字	string	“”
path	点击tab之后跳转到对应的页面路径名称	string	“”
icon	未选中时的图标	string	“”
checkedIcon	选中时的图标	string	“”

四、源代码

index.js

import React from 'react';
import {defaultProps} from './defaultProps';
import './index.css';
export default class TabBottom extends React.Component {
    static defaultProps = defaultProps;
    constructor(props) {
        super(props);
        this.state = {
            tabList:props.tabList,
            activeKey:props.defaultTab||0
        }
    }
    changeTab(item){
        this.props.history.push(item.path);
        const {onClick} =this.props;
        if (onClick) {
            onClick(item);
        }
    }
    render() {
        const {prefixCls} = this.props;
        return (
            <div>
                <div className={prefixCls}>
                    {this.state.tabList.map((item,index)=>{
                        return(<div key={index} className={index == this.state.activeKey?prefixCls+"-tab-active":prefixCls+"-tab"} onClick={()=>this.changeTab(item)}>
                            <img className={prefixCls+"-icon"} src={index == this.state.activeKey?item.iconAct:item.icon} alt=""/>
                            <span className={prefixCls+"-span"}>{item.label}</span>
                        </div>)
                    })}
                </div>
            </div>
        )
    }
}

index.less

@import '../default';
@prefixCls: s-tab-bottom;

.@{prefixCls} {
  display: flex;
  height: @size-50;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #ddd;
  z-index: 1000;
  .@{prefixCls}-tab {
    color: #999;
    font-size: @size-14;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .@{prefixCls}-tab-active {
    color: #cc0000;
    font-size: @size-14;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .@{prefixCls}-icon{
    width: (@size-20)+2;
  }
  .@{prefixCls}-span{
    font-size: @size-12;
    margin-top: 3px;
  }
}

defaultProps.js

import myAct from '../images/tab-bottom/my.png';
import my from '../images/tab-bottom/my-gray.png';
import msgAct from '../images/tab-bottom/message.png';
import msg from '../images/tab-bottom/message-gray.png';
import index from '../images/tab-bottom/index-gray.png';
import indexAct from '../images/tab-bottom/index.png';
import publish from '../images/tab-bottom/pubilsh-gray.png';
import publishAct from '../images/tab-bottom/publish.png';
function noop() {}
export const defaultProps = {
    prefixCls: 's-tab-bottom',
    onClick:noop,
    tabList:[
        {label:"首页",icon:index,iconAct:indexAct,path:"index"},
        {label:"发布",icon:publish,iconAct:publishAct,path:"publish"},
        {label:"消息",icon:msg,iconAct:msgAct,path:"message"},
        {label:"我的",icon:my,iconAct:myAct,path:"personal"},
    ],
};