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代码附录上：

javascript 复制代码

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

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) => {
    const url = "/" + tab.pagePath;
    Taro.switchTab({ url });
  };

  render() {
    const {tabList} =this.state

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

export default CustomTabBar;

不同角色显示不同tabBar

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

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

arduino 复制代码

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个就可以了

arduino 复制代码

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页面修改。