处理Taro小程序自定义导航，不能正确选中 tab 的问题

1.前言

最近公司在做小程序项目，需要自定义导航栏样式，就使用到了自定义导航栏，自定义导航栏很简单，直接在src 下面创建一个文件 custom-tab-bat 即可。

下图是官方文档的截图，清晰明了

开发的时候有几个问题还是要注意一下的 官方也有说明

开干 开干 ！！！

在导航栏开发完成之后发现，自定义导航栏导航切换的时候不会让我切换的导航高亮，然后 该文章主要使处理小程序自定义导航第一次切换的时候页面闪烁问题，不能展示高亮tab的问题 就是在设置tab选中的时候失效，真的很棘手啊（该文章只解决这个问题，并没有处理第一次切换 tab 页面闪烁的问题）

下面介绍一下开发情况

我的页面有两个 home my

2.创建自定义 tab bar 组件

在 src 下面直接创建 custom-tab-bar

custom-tab-bar/index.tsx ``

import {CoverView, CoverImage} from '@tarojs/components';
import Taro from '@tarojs/taro';
import {Component} from 'react';
import homeIcon from './assets/home.png';
import homeIconActive from './assets/home-active.png';
import userIcon from './assets/user.png';
import userIconActive from './assets/user-active.png';
import './index.scss';


export default class Index extends Component<any, any> {
  state = {
    selected: 0,
    list: [
      {
        pagePath: '/pages/home/index',  // 路由
        text: '首页',
        iconPath: homeIcon,
        selectedIconPath: homeIconActive
      },
      {
        pagePath: '/pages/my/index',  // 路由
        text: '我的',
        iconPath: userIcon,
        selectedIconPath: userIconActive
      }
    ]
  }

  switchTab(index, url) {
    this.setSelected(index)
    Taro.switchTab({url})
  }

  setSelected(idx: number) {
    this.setState({
      selected: idx
    })
  }

  render() {
    const {list, selected} = this.state
    return (
      <CoverView className='tab-bar'>
        {list.map((item, index) => {
          return (
            <CoverView
              key={item.pagePath}
              className={`tab-bar-item tab-bar-item-${index}`}
              onClick={this.switchTab.bind(this, index, item.pagePath)}
            >
              <CoverImage
                className={`tab-bar-item-img tab-bar-item-img-${index}`}
                src={selected !== index ? item.iconPath : item.selectedIconPath}
              />
              <CoverView style={{color: selected !== index ? '#999' : '#222'}}>{item.text}</CoverView>
            </CoverView>
          )
        })}
        <CoverView className='tab-bar-line'></CoverView>
      </CoverView>
    )
  }
}

index.scss 样式文件也添加一下吧

custom-tab-bar/index.scss

.tab-bar {
  height: 130px;
  display: flex;
  align-items: center;
  padding-bottom: 40px;
  background: #fff;
  box-sizing: border-box;
  position: relative;

  .tab-bar-item {
    height: 44px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;

    .tab-bar-item-img {
      width: 40px;
      height: 35px;
      margin-right: 20px;

      &.tab-bar-item-img-1 {
        width: 44px;
        height: 44px;
      }
    }
  }

  .tab-bar-line {
    position: absolute;
    background: #999;
    width: 2px;
    height: 44px;
    left: 374px;
  }
}

3.修改 home 组件逻辑

home/index.tsx

import {View} from '@tarojs/components'
import Taro, {useDidShow} from '@tarojs/taro'
import {useMemo} from 'react';
import type CustomTabBar from '../../custom-tab-bar'
import './index.scss'

export default function Home() {

  const page = useMemo(() => Taro.getCurrentInstance().page, [])

  useDidShow(() => {
    const tabbar = Taro.getTabBar<CustomTabBar>(page)
    tabbar?.setSelected(0)
  })

  return (
    <View className='home'>
      home 页面
    </View>
  )
}

4.修改 my 组件逻辑

my/index.tsx

import {View} from '@tarojs/components';
import Taro, {useDidShow} from '@tarojs/taro';
import {useMemo} from 'react';
import type CustomTabBar from '../../custom-tab-bar';
import './index.scss';

export default function Index() {
  const page = useMemo(() => Taro.getCurrentInstance().page, [])

  useDidShow(() => {
    const tabbar = Taro.getTabBar<CustomTabBar>(page)
    tabbar?.setSelected(1)
  })

  return (
    <View className='user-index'>
      我的页面
    </View>
  )
}

以上就解决了自定义导航 tab 切换 不能正确选中 tab 的问题