前言

最近团队请了一位ui设计师把家教小程序重新设计了一遍（之前是我设计的😅😅），所以不能用原生的底部导航栏，这里就记录一下自定义导航栏的实现，还挺多坑的🤣

方案

方案一编写一个底部组件，但所有主页面都需引入
方案二按照Taro文档在根目录新建一个custom-tab-bar组件，无需引入

我选择的是方案二

实现步骤

在app.config.js中新增设置custom:true

在src目录下新建custom-tab-bar组件

index.jsx和mobx的编写

选中状态和点击切换的响应，我利用了mobx中一个全局的变量selected来实现，根据selected === list渲染的index来判断响应状态，这一点在下面的坑中详谈

mobx代码

//index.jsx
import { CoverImage, CoverView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { inject, observer } from "mobx-react";
import { Component } from "react";
import './index.scss';

@inject("globalData")
@observer
class customTabBar extends Component {
    state = {
        selected: 0,
        color: 'rgba(68, 68, 68, 1)',
        selectedColor: 'rgba(68, 68, 68, 1)',
        list: [
          {
            pagePath: 'pages/index/index',
            text: '首页',
            iconPath: '/assets/images/tab3.png',
            selectedIconPath: '/assets/images/home-active.png',
          },
          {
            pagePath: 'pages/my/index',
            text: '个人中心',
            iconPath: '/assets/images/tab1.png',
            selectedIconPath: '/assets/images/tab4-4.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.props.globalData.selected === index ? item.selectedIconPath : item.iconPath} />
                            <CoverView className='bottom-tab-item-text' style={{ color: this.props.globalData.selected === index ? this.state.selectedColor : this.state.color }}>
                                {item.text}
                            </CoverView>
                        </CoverView>
                    })
                }
            </CoverView>
        )
    }
}

export default customTabBar