Taro小程序实现不同角色显示不同自定义tabBar

实验室小程序有个角色切换需求,也是前期开发方便每个同学自己写自己模块，防止git冲突，可能后期，会将两个页面通过角色权限区分从而实现在一个页面写代码（页面复用）。一开始的时候我也在掘金、csdn等网站找功能实现，但是写的真的一言难尽（可能是读者水平太差了，看不懂大佬写的文章），最后还是在github上面找到了相应的功能。顺便提一句，我这里有很多角色，每个角色现在除了个人中心做了页面复用，其他的都没有做页面复用哦，可能就需要超过5个的tabBar

功能展示

先看Taro官方文档

Taro官方文档也是总结下来就两个点：
1. 在app.config.js下面把tabBar的custom设置为true
2. 在src目录下创建custom-tab-bar文件

我的代码实现

app.config.js

1.在app.config.js文件里面将tabBar字段的属性custome值设置为true

src目录下创建命名为：custom-tab-bar文件夹

注意: 这个文件一定要命名为custom-tab-bar
在上面那张图有的 我就不展示
创建js文件写js代码，这里我把我的js代码附录上：

import React, { Component } from "react";
import Taro from "@tarojs/taro";
import {View, Image} from "@tarojs/components";
import {connect} from "react-redux";
import "./index.less";
import { role } from "../utils/tabBarUrl";

@connect(({globalModel})=>({
  globalModel,//这里我们将全局model拿来 判断我们点击的index这样可以更改点击时的颜色
}))
class CustomTabBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabList: [
        {
          'iconPath': '../assets/home.png',
          'selectedIconPath': '../assets/home_selected.png',
          pagePath: 'pages/index/index',
          text: '首页'
        },
        {
          'iconPath': '../assets/hisIconpress.png',
          'selectedIconPath': '../assets/hisIcon.png',
          pagePath: 'pages/Apply/index',
          text: '预约'
        },
        {
          'iconPath': '../assets/user.png',
          'selectedIconPath': '../assets/user_selected.png',
          pagePath: 'pages/user/index',
          text: '个人中心'
        }
      ],
    };
  }

  componentDidMount() {
    const roleName = Taro.getStorageSync('roleName');
    const tabs = role[roleName];
    this.setState({ tabList: tabs });
  }
  switchTab = (tab,index) => {
    const {dispatch} = this.props
    dispatch({
      type:'globalModel/save',//更改全局的index
      payload:{
        selectedIndex:index
      }
    })
    const url = "/" + tab.pagePath;
    Taro.switchTab({ url });
  };

  render() {
    const {tabList} =this.state
    const {globalModel:{selectedIndex}} = this.props
    return (
      <View className='tab-container'>
        {tabList.map((tab, index) => {
          return (
            <View
              key={index}
              className='tab-item'
              onClick={() => this.switchTab(tab,index)}
            >
              <Image
                className='tab-icon'
                src={index === selectedIndex ? tab.selectedIconPath : tab.iconPath}
              />
              <View
                className={index === selectedIndex ? "tab-text-select" : "tab-text"}
              >
                {tab.text}
              </View>
            </View>
          );
        })}
      </View>
    );
  }
}

export default CustomTabBar;

不同角色显示不同tabBar

维护一个角色对象所对应的页面

目前只有三个角色，看代码可以看出来只有个人中心是页面复用了的

export const customer = [
  {
    'iconPath': '../assets/home.png',
    'selectedIconPath': '../assets/home_selected.png',
    pagePath: 'pages/index/index',
    text: '首页'
  },
  {
    'iconPath': '../assets/hisIconpress.png',
    'selectedIconPath': '../assets/hisIcon.png',
    pagePath: 'pages/Apply/index',
    text: '预约'
  },
  {
    'iconPath': '../assets/user.png',
    'selectedIconPath': '../assets/user_selected.png',
    pagePath: 'pages/user/index',
    text: '个人中心'
  }
]
export const caregiver=[
  {
    'iconPath': '../assets/home.png',
    'selectedIconPath': '../assets/home_selected.png',
    pagePath: 'pages/Caregiver/CaregiverIndex',
    text: '首页'
  },
  {
    'iconPath': '../assets/user.png',
    'selectedIconPath': '../assets/user_selected.png',
    pagePath: 'pages/user/index',
    text: '个人中心'
  }
]
export const manager =[
  {
    'iconPath': '../assets/home.png',
    'selectedIconPath': '../assets/home_selected.png',
    pagePath: 'pages/Manager/Index',
    text: '首页',
  },
  {
    'iconPath': '../assets/user.png',
    'selectedIconPath': '../assets/user_selected.png',
    pagePath: 'pages/user/index',
    text: '个人中心'
  }
]
export const role = {
  "customer":customer,
  "manager":manager,
  "caregiver":caregiver
}

在app.config.js添加自定义的tabBar

这里个人中心页面复用了，写一个就可以了，这个项目目前就开发了三个角色，后续会添加，读者不用担心list只能写5个以下，官网说的渲染至少1个最多五个，我们写多少无所谓，渲染不要超过5个就可以了

tabBar: {
  'custom': true,
  'color': '#000',
  'selectedColor': '#56abe4',
  'backgroundColor': '#fff',
  'borderStyle': 'black',
  list: [
    {
    'iconPath': 'assets/home.png',
    'selectedIconPath': 'assets/home_selected.png',
    pagePath: 'pages/index/index',
    text: '首页'
  },
  {
    'iconPath': 'assets/hisIconpress.png',
    'selectedIconPath': 'assets/hisIcon.png',
    pagePath: 'pages/Apply/index',
    text: '预约'
  },
  {
    'iconPath': 'assets/user.png',
    'selectedIconPath': 'assets/user_selected.png',
    pagePath: 'pages/user/index',
    text: '个人中心'
  },
    {
      'iconPath': 'assets/home.png',
      'selectedIconPath': 'assets/home_selected.png',
      pagePath: 'pages/Manager/Index',
      text: '首页',
    },
    {
      'iconPath': 'assets/home.png',
      'selectedIconPath': 'assets/home_selected.png',
      pagePath: 'pages/Caregiver/CaregiverIndex',
      text: '首页'
    },
  ],
},

登录过后分发角色根据不同角色渲染不同tabBar

我这里登录请求，后端返回了userId，通过userId调接口，后端返回了该账号拥有的角色权限 登录成功之后到分发容器里面分发角色，由于界面在上面功能展示里面展示了，这里就不展示截图了

之后我们选择一个角色，弹出模态框确认的时候我们将 roleId 和roleName存到Storage里面 接下来是渲染的问题了，在前面custom-tab-bar文件里面的js代码，我们在componentDidMount的时候通过Storage拿到我们存的角色，并且通过我们自己维护的角色tabBarList来进行渲染。至此，根据不同的角色权限显示不同的tabBar就完成了

还有个坑希望大佬能帮帮小白

在我功能展示开发之前，就是如下的图。第一次进来是客户这个角色，然后依次点击，首页，预约，个人中心，都会触发一次componentDidMount，到了个人中心切换管理员角色之后，来到管理员的首页，也会触发componentDidMount,接下来，点击管理员的个人中心，不会触发componentDidMount了，而且tabBar变成了客户的tabBar，然而tabBar的个人中心内容还是管理员的。后面，我发现这个缺陷之后,我就换成在自定义tabBar渲染之前选定角色，并且不允许在里面tabBar页面修改。