umi——05——组件库集成（antd-mobile）

1.antd-mobile引入

做一个手机端的页面
在引入antd-mobile的导航NavBar组件时，显示错误，应该是Umi框架的antd-mobile版本和我们使用的antd-mobile当前版本的组件不符合
鼠标悬浮在antd-mobile上 ，显示版本是2.3.4
解决方法：下载最新版本（一个项目要么一直用npm要么用cnpm或者yarn,不要混用）
还是报错，需要我们将之前版本关掉，在.umirc.ts文件中关掉，这样就会走自己下载的版本了
这时候能正常显示了

2.进入city页面和详情页面（Detail关闭选项卡）

layouts文件夹下的index.tsx

import React from 'react';
import { NavLink } from 'umi';
import './index.less';
export default function Indexlayouts(props: any) {
  // console.log(props);
  if (
    props.location.pathname === '/city' ||
    props.location.pathname.includes('/detail')
  ) {
    return <div>{props.children}</div>;
  }
  return (
    <div>
      {/* 插槽，其他组件显示位置 */}
      {props.children}
      {/*声明式导航 */}
      <ul>
        <li>
          {/* 选项卡 */}
          <NavLink to="/film" activeClassName="active">
            film
          </NavLink>
        </li>
        <li>
          <NavLink to="/center" activeClassName="active">
            center
          </NavLink>
        </li>
        <li>
          <NavLink to="/cinema" activeClassName="active">
            cinema
          </NavLink>
        </li>
      </ul>
    </div>
  );
}

3.IndexBar序列

后端返回的数据（pinyin），按照字母分类

import React, { useEffect, useState } from 'react';
import { IndexBar, List } from 'antd-mobile';
import { useHistory } from 'umi';
export default function City() {
  const [list, setList] = useState([]);
  const history = useHistory();
  function filterCity(cities: any) {
    // console.log(cities);
    // 26个字母
    const letterArr: Array<string> = []; //字符串类型
    //  二维数组
    const newList: any = [];
    for (var i = 65; i < 91; i++) {
      letterArr.push(String.fromCharCode(i));
    }
    // console.log(letterArr);
    for (var j in letterArr) {
      // console.log(cities.filter((item:any)=>item.pinyin.substring(0, 1).toUpperCase()==="A"));
      var cityitems: any = cities.filter(
        (item: any) =>
          item.pinyin.substring(0, 1).toUpperCase() === letterArr[j],
      );
      // 比如字母O无对应城市，cityitems为空数组 长度为0为假，就不放进newList数组
      cityitems.length &&
        newList.push({
          title: letterArr[j],
          items: cityitems,
        });
    }
    // console.log(newList);
    return newList;
  }
  useEffect(() => {
    fetch('https://m.maizuo.com/gateway?k=2777578', {
      headers: {
        'X-Client-Info':
          '{"a":"3000","ch":"1002","v":"5.2.0","e":"16460383564094280654127105","bc":"330100"}',
        'X-Host': ' mall.film-ticket.city.list',
      },
    })
      .then((res) => res.json())
      .then((res) => {
        // console.log(res.data.cities);
        setList(filterCity(res.data.cities));
      });
  }, []);
  function changeCity(item: any) {
    console.log(item.name, item.cityId);
    history.push('./cinema');
  }
  return (
    <div>
      <div style={{ height: window.innerHeight }}>
        <IndexBar style={{ height: '100%' }}>
          {list.map((group: any) => {
            const { title, items } = group;
            return (
              <IndexBar.Panel index={title} title={title} key={title}>
                <List>
                  {items.map((item: any, index: number) => (
                    <List.Item
                      key={index}
                      onClick={() => {
                        changeCity(item);
                      }}
                    >
                      {item.name}
                    </List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            );
          })}
        </IndexBar>
      </div>
    </div>
  );
}