backup

src/components/NavHeader/index.css

@@ -0,0 +1,4 @@
+.navbar {
+    color: #333;
+    background-color: #f6f5f6;
+}

src/components/NavHeader/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { NavBar } from "antd-mobile";
+import { useNavigate } from "react-router-dom";
+import PropTypes from 'prop-types'
+import styles from './index.module.css'
+export default function NavHeader({children,back}){
+    const defaultHandler =()=>navigate(-1);
+    const navigate = useNavigate();
+    return (<NavBar className={styles.NavBar} back='返回' onBack={back||defaultHandler} >{children}</NavBar>)
+}
+// 添加校验
+NavHeader.propTypes={
+    children:PropTypes.string.isRequired,
+    back:PropTypes.func
+}
+// export default withRouter(NavHeader)

src/components/NavHeader/index.module.css

@@ -0,0 +1,8 @@
+.navbar {
+    color: #333;
+    background-color: #f6f5f6;
+}
+/* 全局类型处理 */
+.navbar :global(.am-navbar-title){
+    color: #333;
+}

src/pages/CityList/index.css

@@ -1,10 +1,6 @@
 .citylist{
     height: 100%;
-    padding-top: 45px;
+    /* padding-top: 45px; */
-}
-.citylist-navbar {
-    background: #f6f5f6;
-    margin-top: -45px;
 }
 ul{
     list-style: none;

src/pages/CityList/index.js

@@ -6,6 +6,9 @@ import axios from "axios";
 import { getCurrentCity } from "../../utils";
 import { List, AutoSizer } from "react-virtualized";
 import WidthUseNavigate from "../WidthUseNavigate";
+import NavHeader from "../../components/NavHeader";
+import styles from './index.module.css'
+console.log(styles)
 // list:[{},{}]
 const formatCityIndex = (letter) => {
     switch (letter) {
@@ -165,7 +168,7 @@ class CityListInner extends React.Component {
     }
 
     render() {
-        return <div className="citylist"><NavBar className="citylist-navbar" back='返回' onBack={back}>城市选择</NavBar>
+        return <div className="citylist"><NavHeader>城市选择</NavHeader>
             <AutoSizer>
                 {({ width, height }) => (
                     <List

src/pages/Map/index.module.css

@@ -0,0 +1,10 @@
+.map{
+    padding-top: 45px;
+    height: 100%;
+}
+.container{
+    height: 100%;
+}
+.map :global(.adm-nav-bar){
+    margin-top: -45px;
+}