01-布局页面结构

目标：能够使用准备好的模板搭建布局页面结构
分析说明：
TabBar 组件：
const tabs = [ { key: ‘home’, title: ‘首页’, icon: , badge: Badge.dot }, { key: ‘todo’, title: ‘我的待办’, icon: , badge: ‘5’ }, { key: ‘message’, title: ‘我的消息’, icon: (active: boolean) => (active ? : ), badge: ‘99+’ }, { key: ‘personalCenter’, title: ‘个人中心’, icon: }] {tabs.map(item => ( } // icon 的值可以是一个函数，通过这种方式，就可以觉得渲染不同的图标 icon={(active: boolean) => { // 此处的参数 active 表示：当前项是否高亮 console.log(active, item.title) return active ? : }} title={item.title} /> ))}
步骤：

  1. 将模板拷贝到项目中
  2. 在 Layout 组件中配置底部 TabBar 对应的路由
  3. 使用 antd-mobile 的 TabBar 组件创建底部标签栏

核心代码：
Layout/index.tsx 中：
import { Route } from ‘react-router-dom’;
import { TabBar } from ‘antd-mobile’;
import styles from ‘./index.module.scss’;

import Icon from ‘@/components/Icon’;

// 导入页面组件，配置路由
import Home from ‘../Home’;
import Question from ‘../Question’;
import Video from ‘../Video’;
import Profile from ‘../Profile’;

const tabs = [
{ path: ‘/home/index’, icon: ‘iconbtn_home’, text: ‘首页’ },
{ path: ‘/home/question’, icon: ‘iconbtn_qa’, text: ‘问答’ },
{ path: ‘/home/video’, icon: ‘iconbtn_video’, text: ‘视频’ },
{ path: ‘/home/profile’, icon: ‘iconbtn_mine’, text: ‘我的’ },
];

const Layout = () => {
return (
















{tabs.map((item) => (
 key={item.path}
icon={(active) => (
type={active ? ${item.icon}_sel : item.icon}
className=”tab-bar-item-icon”
/>
)}
title={item.text}
/>
))}


);
};

export default Layout;

02-TabBar 配合路由使用

目标：能够实现 tab 切换路由和高亮
分析说明：
TabBar 高亮的两种情况：

  1. 点击哪个 tab，哪个 tab 高亮
  2. 刷新页面时，根据当前路由让对应 tab 高亮

因为 tab 高亮与路由相关，因此，可以直接使用路由地址（location.path）作为高亮 key 值即可
步骤：

  1. 导入路由的 history 和 location 对应的 hook
  2. 将当前路由地址作为 TabBar 的高亮 key 值
  3. 在 TabBar 的 change 事件中，根据当前 key 切换路由

核心代码：
import { useHistory, useLocation } from ‘react-router-dom’;

const Layout = () => {
const history = useHistory();
const location = useLocation();

const changeRoute = (path: string) => {
history.push(path);
};

return (
// …

className=”tab-bar”
activeKey={location.pathname}
onChange={(key) => changeRoute(key)}
>
);
};

export default Layout;