react 自定义底部导航栏 Tabbar

自定义tabbar , 点击图标，切换样式

效果图

自定义tabbar

一、目录

  src下新建文件夹，component用于存放公共组件，page用于存放页面组件。res放一些静态资源。

目录

二、步骤

2.1新建子组件TabItem

  其中通过props传入子组件名字，图标 ，选中的样式、以及点击事件。也就是图下的一个小模块。

tabbar子组件

class TabItem extends Component{
  render(){
     return (
         

            

            
{this.props.tabName}
         
     );
  }
}

2.2新建父组件Tabbar

  小贴士，定义id时，最好与图标未选中时的命名一致，这样方便处理。
   - 循环过滤tabs, 根据每一项的id与current比较，选则图标和样式。
   - 将过滤的结果渲染出来
   - 子组件点击时，调用父组件的 itemNav 时间，达到切换的效果。

class Tabbar extends Component {
  constructor(){
    super();
    this.state={
      tabs:[
        {tabName:'首页',id:'index'},
        {tabName:'排行榜',id:'ranking'},
        {tabName:'今日打卡',id:'task'},
        {tabName:'我的',id:'mine'},
      ],
      current:0,
    };
  }

  itemNav = (index) => {
    //在这里就可以取到子组件传来的值
    this.setState({
      current: index,
    })
  }

  render() {
   var tabsList= this.state.tabs.map((item,index) =>{
      var tabUrl=index === this.state.current ?(require('../../../res/images/'+item.id+'_active.png')):(require('../../../res/images/'+item.id+'.png'));
      var  tabClass=index === this.state.current ?"tab-active":"";
      return (
           { this.itemNav(index)} }>
      );
    });
    return (
        

          {tabsList}
        
    );
  }
}

三、样式

  在头部引入样式

import './Tabbar.css';