标签栏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 (
<CoverView className='bottom-tab'>
{
this.state.list.map((item, index) => {
return <CoverView className='bottom-tab-item' onClick={this.switchTab.bind(this, item)} data-path={item.pagePath} key={item.text}>
<CoverImage className='bottom-tab-item-img' src={this.state.selected === index ? item.selectedIconPath : item.iconPath} />
<CoverView className='bottom-tab-item-text' style={{ color: this.state.selected === index ? this.state.selectedColor : this.state.color }}>
{item.text}
</CoverView>
</CoverView>
})
}
</CoverView>
)
}
}
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在我的另一篇文章中有解释：
//www.greatytc.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 (
<View className='container'>
<Text>HOME</Text>
</View>
)
}
}
其中this.$scope.getTabBar()可以拿到TabBar实例，selected是当前被选中的页面的索引。
当然不想自定义又追求更好的效果的话也可以使用Taro官方的组件库，其中有TabBar组件，需要提前为项目安装Taro UI库：
https://taro-ui.jd.com/#/docs/tabbar](https://taro-ui.jd.com/#/docs/tabbar
