image.png

第一步

配置 tabBar 配置tabbar的原因是這樣才可以在自定義組件中使用 switchTab

tabBar: {
      color: '#bbc0ca',
      selectedColor: '1f83e1',
      backgroundColor: '#feffff',
      borderStyle: 'white',
      list: [
       ...
       // iconPath selectedIconPath 都加一張白底背景
      ]
}

第二步 自定義 tabBar組件

export interface State {
  navItem: number
}
export default class TabBarextends Component {
  state: State
  constructor() {
    super()
    this.state = {
      navItem: 0
    }
  }
  componentWillMount() {
    var navList = [
      'pages/index/index',
      'pages/bills/index',
      '',
      'pages/report/index',
      'pages/my/index',
    ]
    this.setState({
      navItem: navList.indexOf(Taro.getCurrentPages()[0].route)
    })
  }
  switchTab(url, index) {
    Taro.setStorageSync('navItem', index)
    Taro.switchTab({url: url})
  }
  routerPush (index) {
    switch (index) {
      case 0:
        this.switchTab('/pages/index/index', index)
      break
      case 1:
        this.switchTab('/pages/bills/index', index)
      break
      case 2:
        Taro.redirectTo({url:'/pages/remember/index'})
        this.setState({
          navItem: index
        })
      break
      case 3:
        this.switchTab('/pages/report/index', index)
      break
      case 4:
        this.switchTab('/pages/my/index', index)
      break
    }

  }
  render () {
    return (
      <View className='ft-menu'>
        <View className={classnames('nav nav1 ', this.state.navItem === 0 && 'active')} onClick={this.routerPush.bind(this, 0)}>
          <Text className='nav-icon icon1'></Text>
          <Text className='nav-text'>首頁(yè)</Text>
        </View>
        <View className={classnames('nav nav2 ', this.state.navItem === 1 && 'active')} onClick={this.routerPush.bind(this, 1)}>
          <Text className='nav-icon icon2'></Text>
          <Text className='nav-text'>賬單</Text>
        </View>
        <View className={classnames('nav nav3 ')} onClick={this.routerPush.bind(this, 2)}>
          <Text className='nav-text'>記一筆</Text>
        </View>
        <View className={classnames('nav nav4 ', this.state.navItem === 3 && 'active')} onClick={this.routerPush.bind(this, 3)}>
          <Text className='nav-icon icon4'></Text>
          <Text className='nav-text'>報(bào)表</Text>
        </View>
        <View className={classnames('nav nav5 ', this.state.navItem === 4 && 'active')} onClick={this.routerPush.bind(this, 4)}>
          <Text className='nav-icon icon5'></Text>
          <Text className='nav-text'>我的</Text>
        </View>
      </View>
    )
  }
}

第三步 隱藏原生tabBar引用組件

componentWillMount () {
    Taro.hideTabBar()
}