Taro自定义Tabbar

/**
 * 页面底部导航栏下标
 * */
export const PageTabBarEnum = {

  TabHomePage: 1,    // 自有小程序首页
  TabOrderDishesPage: 2,  // 点餐首页
  TabMemberPage: 3,   // 会员中心页
  TabPdwHomePage: 4,   // 平台小程序首页
  TabPdwOrderListPage: 5,  // 平台订单列表页
  TabPdwMemberPage: 6   // 平台小程序会员
}

// 外卖平台
const PlatformEnum = {
  Merchant: 0,
  Pdw: 1,
}

const TabList = [
  {
    pagePath: '/pages/...',  // 路由
    text: '首页',
    platform: PlatformEnum.Merchant,
    tabbar: PageTabBarEnum.TabHomePage,
    iconPath: '../../resource/icons/tab-icon-home.png',
    selectedIconPath:  '../../resource/icons/tab-icon-home-check.png'
  }, {
    pagePath: '/pages/...',
    text: '点餐',
    platform: PlatformEnum.Merchant,
    tabbar: PageTabBarEnum.TabOrderDishesPage,
    iconPath: '../../resource/takeout/pdw-tab-order.png',
    selectedIconPath: '../../resource/takeout/pdw-tab-order-check.png'
  }, {
    pagePath: '/pages/...',
    text: '会员',
    platform: PlatformEnum.Merchant,
    tabbar: PageTabBarEnum.TabMemberPage,
    iconPath: '../../resource/icons/tab-icon-member.png',
    selectedIconPath: '../../resource/icons/tab-icon-member-check.png'
  }, {
    pagePath: '/pages/...',
    text: '首页',
    platform: PlatformEnum.Pdw,
    tabbar: PageTabBarEnum.TabPdwHomePage,
    iconPath: '../../resource/takeout/pdw-tab-home.png',
    selectedIconPath: '../../resource/takeout/pdw-tab-home-check.png'
  },  {
    pagePath: '/pages/...',
    text: '订单',
    platform: PlatformEnum.Pdw,
    tabbar: PageTabBarEnum.TabPdwOrderListPage,
    iconPath: '../../resource/takeout/pdw-tab-order.png',
    selectedIconPath: '../../resource/takeout/pdw-tab-order-check.png'
  },  {
    pagePath: '/pages/...',
    text: '我的',
    platform: PlatformEnum.Pdw,
    navigateTo: true,
    tabbar: PageTabBarEnum.TabPdwMemberPage,
    iconPath: '../../resource/takeout/pdw-tab-my.png',
    selectedIconPath: '../../resource/takeout/pdw-tab-my-check.png'
  }
]

class customTabBar extends Component {

  static propTypes = {
    TabBar: PropsType.number,   // 当前tabbar
    onChangeTabbar: PropsType.func,  // 修改tabbar
  }

  state = {
    selected: 0,  // 当前激活的tab下标
    color: '#000',  // 字体颜色
    selectedColor: '#00bab4',  // 激活的字体颜色
    backgroundColor: '#ffffff',  // 背景色
    borderStyle: 'black',   // 边框颜色
  }

  componentDidMount() {
  }

  /*
  * 获取平台类型*/
  IsPdwPlatform = () => {
    return PlatformEnum.Merchant
  }

  /**
   * 获取底部Tab列表
   * */
  getTabList = () => {
    // 这里判断平台来区分需要显示的tabbar  这里IsPdwPlatform 函数需要自己实现
    let platform = this.IsPdwPlatform() ? PlatformEnum.Pdw : PlatformEnum.Merchant;
    let tabs = TabList.filter(item => item.platform === platform);
    let tabList = tabs.map(item => {
      return {...item}
    });
    return tabList;
  }

  render() {
    const {TabBar} = this.props;
    let TabList = this.getTabList();
    return (
      <CoverView className={classnames('custom-tab')}>
        {
          TabList.map((item, index) => {
            return <CoverView className='custom-tab-item' onClick={this.switchTab.bind(this, item)}
                              data-path={item.pagePath} key={index}>
              <CoverImage className='custom-tab-item-img'
                          src={TabBar === item.tabbar ? item.selectedIconPath : item.iconPath}/>
              <CoverView className='custom-tab-item-text'
                         style={{color: TabBar === item.tabbar ? this.state.selectedColor : this.state.color}}>
                {item.text}
              </CoverView>
            </CoverView>
          })
        }
      </CoverView>
    )
  }

  /**
   * 切换Tab
   * */
  switchTab = (tabData) => {
    let that = this;
    const {pagePath, navigateTo, tabbar} = tabData;
    if (navigateTo) {
      Taro.navigateTo({
        url: pagePath
      })
    } else {
      Taro.switchTab({
        url: pagePath,
        success: () => {
          that.props.onChangeTabbar(tabbar);  // 记录当前切换的底部tab
        }
      })
    }
  }
}

const mapStateToProps = (state) => {
  const {TabBar} = state[StoreKeys.GlobalStore];
  return {
    TabBar: TabBar,
  };
};

const mapDispatchToProps = {
  onChangeTabbar    // 记录底部获取焦点的tab
};

export default connect(mapStateToProps, mapDispatchToProps)(customTabBar)

.custom-tab {
  //display: none;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 50Px;
  border-radius: 0;
  box-sizing: border-box;
  border-top: 1Px solid #f1f1f1;
  background-color: #FFFFFF;

  &-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    &-img {
      margin: 0 auto;
      width: 28PX;
      height: 28Px;
    }

    &-text {
      margin-top: 4Px;
      font-size: 10Px;
    }
  }
}

.show-custom-tab {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}