使用taro开发微信小程序如何使用官网的custom-tab-bar

根据登录用户的角色，展示不同的TabBar

第一步：
在src目录下创建custom-tab-bar文件夹，然后创建index.jsx和index.scss

index.jsx

import Taro, { Component } from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.scss';

@connect(({ config }) => ({ config }))
class TabBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: 0,
      color: '#333',
      selectedColor: '#0e408f',
    };
  }

  switchTab(index) {
    const { config } = this.props;
    const { tabBar } = config;
    Taro.switchTab({
      url: tabBar[index].pagePath
    });
    this.setState({
      selected: index
    });
  };

  render() {
    const { config } = this.props;
    const { tabBar } = config;
    return (
      <View className='tab-bar'>
        <View className='tab-bar-border' />
        {
          tabBar.length ?
            tabBar.map((item, index) => {
              return (
                <View key={index} className='tab-bar-item' onClick={this.switchTab.bind(this, index)}>
                  <Image className='icon' src={selected === index ? item.selectedIconPath : item.iconPath} />
                  <View className='text'>{item.text}</View>
                </View>
              );
            }) : null
        }
      </View>
    );
  }
}

export default TabBar;

index.scss

.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 96px;
	background: white;
	display: flex;
	padding-bottom: env(safe-area-inset-bottom);
	.tab-bar-border {
		background-color: rgba(0, 0, 0, 0.33);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 2px;
		transform: scaleY(0.5);
	}
	.tab-bar-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.icon {
			width: 54px;
			height: 54px;
		}
		.text {
			font-size: 20px;
		}
	}
}

第二步
修改app.jsx里面的关于tabbar的配置custom设置true，添加redux数据

import { SET_CONFIG } from '../constants/actionType';

const initialState = {
  userType: 0, // 1-学校，2-教练，3-学员
  userInfo: {},
  ins: {},
  avatarUrl: '',
  tabBar: [],
  needFresh: false,
};

function mergeItem(state = {}, payload = {}) {
  const { data = {} } = payload;
  return Object.assign({}, state, data);
}

export default function course (state = initialState, action) {
  switch (action.type) {
    case SET_CONFIG:
      return mergeItem(state, action.payload);
    default:
      return state
  }
}

第三步
在登录成功的地方设置一下list

const { dispatch } = this.props;
    if (userType === 1) {
      this.setState({
        leftActive: false,
        rightActive: true,
      });
      dispatch(updateConfig({ tabBar: schoolTarBar }));
    } else {
      this.setState({
        leftActive: true,
        rightActive: false,
      });
      dispatch(updateConfig({ tabBar: coachTabBar }));
    }

第四步

在每个有tabbar的页面的componentDidShow生命周期调用以下方法

setTabBar = () => {
    if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar) {
      this.$scope.getTabBar().setData({
        selected: 0 //当前tab对应的索引
      })
    }
  };