umi 如何实现标签页切换和路由动效

全局路由

在umi项目的src中创建layouts，src/layouts/index.js中编写一个react组件。

组件默认接收一个props属性为children，children将会默认渲染src/page/index.js下也就是umi的默认进入页，路由切换时等于是切换children部分。

剩下的部分可以全局渲染，因此可以把标签渲染在底部全局，children放在上方，就达到了点击下方标签，切换路由的效果。

示例

我示例使用的是antd-mobile v5.0.0-rc.3和react-transition-group，在umi项目中需要额外安装。

yarn add react-transition-group
yarn add antd-mobile@v5.0.0-rc.3

src/layouts/index.js代码

1. 我想要的效果是标签页的切换都是用replace实现，当检测history.action === 'REPLACE'时，则根据标签页的前后顺序决定向左还是向右切换动画。
2. 当history.action === 'PUSH'或者'POP'时，后续将会PUSH进入二级页面，就是前进，点击浏览器后退就是POP后退

import styles from './index.less';
import { TabBar } from 'antd-mobile/2x';
import router from 'umi/router';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import withRouter from 'umi/withRouter';

import React, { useState } from 'react';

import home1 from '@/assets/home1.png';
import home2 from '@/assets/home2.png';
import update1 from '@/assets/update1.png';
import update2 from '@/assets/update2.png';
import collect1 from '@/assets/collect1.png';
import collect2 from '@/assets/collect2.png';
import my1 from '@/assets/my1.png';
import my2 from '@/assets/my2.png';

export default withRouter(({ location, children, history }) => {
  // 根据前进还是后退显示不同的转场动画效果
  const ANIMATION_MAP = {
    PUSH: 'forward',
    POP: 'back',
  };

  // 路由跳转时执行
  const checkrouter = () => {
    const { state = {} } = location;
    //beforepath 跳转前路由，只有在四个标签页跳转时有传递
    const { beforepath } = state;
    //curpath 当前路由
    const curpath = history.location.pathname;
    // 标签页路由集合
    const indexRouter = ['/', '/update', '/collect', '/my'];
    // 判断是不是标签页跳转
    const flag = history.action === 'REPLACE';
    // 判断标签页跳转前后顺序
    const before = indexRouter.findIndex(cur => cur === beforepath);
    const after = indexRouter.findIndex(cur => cur === curpath);
    const change = before < after ? 'PUSH' : 'POP';
    // 如果当前路由不是标签，说明跳去了二级页面，应该隐藏标签
    sethide(after === -1);
    // 设置转场动画效果
    return ANIMATION_MAP[flag ? change : history.action];
  };

  // 判断标签页是否隐藏
  const [hide, sethide] = useState(false);

  const tabs = [
    {
      key: '/',
      title: '首页',
      icon: <img src={home1} className={styles.iconImg} alt="首页" />,
      selectedIcon: <img src={home2} className={styles.iconImg} alt="首页" />,
    },
    {
      key: '/update',
      title: '更新',
      icon: <img src={update1} className={styles.iconImg} alt="更新" />,
      selectedIcon: <img src={update2} className={styles.iconImg} alt="更新" />,
    },
    {
      key: '/collect',
      title: '收藏',
      icon: <img src={collect1} className={styles.iconImg} alt="收藏" />,
      selectedIcon: <img src={collect2} className={styles.iconImg} alt="收藏" />,
    },
    {
      key: '/my',
      title: '我的',
      icon: <img src={my1} className={styles.iconImg} alt="我的" />,
      selectedIcon: <img src={my2} className={styles.iconImg} alt="我的" />,
    },
  ];

  return (
    <div
      style={{ display: 'flex', flexDirection: 'column', height: '100%', paddingBottom: '5rem' }}
    >
      <div style={{ flex: 1, display: 'flex', overflow: 'auto' }}>
        <TransitionGroup
          childFactory={child => React.cloneElement(child, { classNames: checkrouter() })}
        >
          <CSSTransition
            key={location.pathname}
            timeout={300}
            style={{
              position: 'fixed',
              height: '100%',
              width: '100%',
              top: '0',
              overflow: 'auto',
              // 隐藏标签时要把下方padding重置为0
              paddingBottom: hide ? '0rem' : '5rem',
            }}
          >
            <div>{children}</div>
          </CSSTransition>
        </TransitionGroup>
      </div>

      <div className={styles.normal} style={{ visibility: hide ? 'hidden' : 'unset' }}>
        <TabBar
          activeKey={location.pathname}
          onChange={beforepath =>
            // 标签跳转，使用replace，同时传递跳转前路由
            router.replace(beforepath, { beforepath: history.location.pathname })
          }
        >
          {tabs.map(item => (
            <TabBar.Item
              key={item.key}
              // 切换选中未选中图片
              icon={location.pathname === item.key ? item.selectedIcon : item.icon}
              title={item.title}
            />
          ))}
        </TabBar>
      </div>
    </div>
  );
});

样式代码

src/global.less

1. 我是用rem加vw的方式做全局适配。因此你会看到我使用长度一般是rem/20这种奇怪的单位，1rem等于html的font-size100/750vw*20，则750rem/20就是100vw，就是一整个屏幕宽度，一般的ui设计图是750px，也就是只要把设计图上的数字使用rem/20单位就可以进行任何设备的适配了。

html,
body,
#root {
  height: 100%;
  font-family: '楷体';
}

html {
  font-size: 100/750vw*20;
}

body {
  margin: 0;
}

src/loyouts/index.less

1. 前进和后退的动作在前半部分，后面是antd页标签的适配调整，可以适配大屏小屏任何设备。

:global {
  .forward-enter {
    opacity: 0;
    transform: translateX(100%);
  }

  .forward-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 300ms ease-in;
  }

  .forward-exit {
    opacity: 1;
    transform: translateX(0);
  }

  .forward-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 300ms ease-in;
  }

  .back-enter {
    opacity: 0;
    transform: translateX(-100%);
  }

  .back-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 300ms ease-in;
  }

  .back-exit {
    opacity: 1;
    transform: translateX(0);
  }

  .back-exit-active {
    opacity: 0;
    transform: translate(100%);
    transition: all 300ms ease-in;
  }
}


.normal {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rem/20;
  background-color: white;
  // border-top: 1rem/20 solid lightgray;
  box-shadow: 0 -1px 10px 1px rgba(0, 0, 0, 0.1);

  :global {
    .adm-tab-bar-item {
      height: 100rem/20;

      .adm-tab-bar-item-icon {
        height: 40rem/20;
        width: 40rem/20;
        margin: 0;
        font-size: initial;
      }

      .adm-tab-bar-item-title {
        font-size: 24rem/20;
        line-height: unset;
      }
    }

    .adm-tab-bar-item-active {
      color: #B9E2F6;
    }
  }
}

.iconImg {
  width: 40rem/20;
  height: $width;
}