Taro自定义标签栏TabBar

标签栏TarBar是移动端很常见的设计需求，但是默认的TabBar的定制性是很低的，所以往往我们需要自定义。而Taro既然立足于微信小程序开发，而微信小程序除了默认的TabBar还支持自定义TabBar，所以Taro其实也是可以像小程序一样自定义TabBar的。

微信小程序如何自定义TabBar这里不作展开，网上文章也很多，这里丢一个官方的地址：

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

先讲一下Taro默认怎么使用TabBar：

只需要在app.jsx的config中加入以下代码即可，相信大家看字面意思就明白怎么使用了

    tabBar: {
      color: 'rgba(68, 68, 68, 1)',
      selectedColor: 'rgba(68, 68, 68, 1)',
      backgroundColor: 'white',
      list: [
        {
          pagePath: 'pages/home/home',
          text: '首页',
          iconPath: './image/ic_home_normal.png',
          selectedIconPath: './image/ic_home_selected.png'
        },
        {
          pagePath: 'pages/me/me',
          text: '我的',
          iconPath: './image/ic_me_normal.png',
          selectedIconPath: './image/ic_me_selected.png'
        }]
    }

接下来是重点，Taro如何自定义TabBar：

第一步：
也需要在app.jsx的config中加入tabBar相关的底代码，唯一区别就是加了个custom: true，我们要自定义TabBar就必须将custom设为true。

    tabBar: {
      custom: true,
      color: 'rgba(68, 68, 68, 1)',
      selectedColor: 'rgba(68, 68, 68, 1)',
      backgroundColor: 'white',
      list: [
        {
          pagePath: 'pages/home/home',
          text: '首页',
          iconPath: './image/ic_home_normal.png',
          selectedIconPath: './image/ic_home_selected.png'
        },
        {
          pagePath: 'pages/me/me',
          text: '我的',
          iconPath: './image/ic_me_normal.png',
          selectedIconPath: './image/ic_me_selected.png'
        }]
    }

第二步：
在src之下新建custom-tab-bar文件夹，在其中创建js和样式文件，这里可以根据自己的需求做调整，重点就是必须要在custom-tab-bar中自定义TabBar。

custom-tab-bar

下面贴一下我的js文件和样式文件写法，仅供参考。

import Taro, { Component } from '@tarojs/taro'
import { View, CoverView, CoverImage } from '@tarojs/components'
import './index.scss'

class customTabBar extends Component {

    state = {
        selected: 0,
        color: 'rgba(68, 68, 68, 1)',
        selectedColor: 'rgba(68, 68, 68, 1)',
        list: [
            {
                pagePath: 'pages/home/home',
                text: '首页',
                iconPath: '../image/ic_home_normal.png',
                selectedIconPath: '../image/ic_home_selected.png'
            },
            {
                pagePath: 'pages/me/me',
                text: '我的',
                iconPath: '../image/ic_me_normal.png',
                selectedIconPath: '../image/ic_me_selected.png'
            }
        ]
    }

    switchTab = (item) => {
        const url = '/' + item.pagePath
        Taro.switchTab({
            url: url
        })
    }

    render() {
        return (
            
                {
                    this.state.list.map((item, index) => {
                        return 
                            
                            
                                {item.text}
                            
                        
                    })
                }
            
        )
    }
}

export default customTabBar

其中Taro.switchTab就是用来切换Tab的方法，这里要注意，用来跳转的路径之前必须要加上'/'，我在这里卡住很久，也算是个坑吧。
下面是样式文件，同样是仅供参考。

.bottom-tab {
  position: fixed;
  display: flex;
  width: 100%;
  height: 49PX;
  background: white;
  box-shadow: 0PX -5PX 10PX 0PX rgba(0, 0, 0, 0.03);
  bottom: 0;
  &-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-img {
      margin: 5PX auto 0;
      width: 24PX;
      height: 24PX;
    }
    &-text {
      height: 14PX;
      line-height: 14PX;
      font-size: 10PX;
      font-family: PingFangSC-Light, PingFang SC;
      font-weight: 300;
      color: rgba(68, 68, 68, 1);
    }
  }
}

至于为什么用PX在我的另一篇文章中有解释：
https://www.jianshu.com/p/a785a4bf52ff
切换Tab之后肯定希望最下方的Tab样式跟着变换，这个也好实现，在对应切换的页面的componentDidShow()方法这么写：

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './home.scss'

export default class home extends Component {

    componentDidShow() {
        if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
            this.$scope.getTabBar().$component.setState({
                selected: 0
            })
        }
    }

    render() {
        return (
            
                HOME
            
        )
    }
}

其中this.$scope.getTabBar()可以拿到TabBar实例，selected是当前被选中的页面的索引。
当然不想自定义又追求更好的效果的话也可以使用Taro官方的组件库，其中有TabBar组件，需要提前为项目安装Taro UI库：
https://taro-ui.jd.com/#/docs/tabbar](https://taro-ui.jd.com/#/docs/tabbar