react移动端封装

react 版本 18.1.0

react-router-dom 版本 6.3.0

一、创建 React 框架

创建完成以后删除多余文件

二、配置 rem

1、安包

npm
npm install lib-flexible postcss-pxtorem

yarn
yarn add lib-flexible postcss-pxtorem

2、git 提交 + 解包

git 提交
git add .
git commit -m 'eject之前的提交'

解包
yarn eject
npm run eject

3、解包完成

进入 config 文件夹

打开 config/webpack.config.js

搜索 postcss-loader

替换 options : {} 对象

rootValue：设计图尺寸修改

  options: {
          postcssOptions: {
            // Necessary for external CSS imports to work
            // https://github.com/facebook/create-react-app/issues/2677
            ident: "postcss",
            config: false,
            plugins: !useTailwind
              ? [
                  "postcss-flexbugs-fixes",
                  [
                    "postcss-preset-env",
                    {
                      autoprefixer: {
                        flexbox: "no-2009",
                      },
                      stage: 3,
                    },
                  ],
                  [
                    "postcss-pxtorem",
                    {
                      rootValue: 75, //设计图最大宽度除以10  //比如750的宽就写成75  我这边是1125的宽
                      selectorBlackList: [],
                      propList: ["*"],
                      exclude: /node_modules/i,
                    },
                  ],
                  // Adds PostCSS Normalize as the reset css with default options,
                  // so that it honors browserslist config in package.json
                  // which in turn let's users customize the target behavior as per their needs.
                  "postcss-normalize",
                ]
              : [
                  "tailwindcss",
                  "postcss-flexbugs-fixes",
                  [
                    "postcss-preset-env",
                    {
                      autoprefixer: {
                        flexbox: "no-2009",
                      },
                      stage: 3,
                    },
                  ],
                  [
                    "postcss-pxtorem",
                    {
                      rootValue: 75, //设计图最大宽度除以10  //比如750的宽就写成75  我这边是1125的宽
                      selectorBlackList: [],
                      propList: ["*"],
                      exclude: /node_modules/i,
                    },
                  ],
                ],
          },
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },

flexible引入

在 index.js 文件中引入 lib-flexible

import 'lib-flexible'
// 引入完成重新启动项目即可见效果

三、引入 Router

官网地址：reactrouter.com/en/6.8.1/ro…

npm
npm install react-router-dom@6

yarn
yarn add react-router-dom@6

1、创建目录

在 src 目录下创建 pages 文件夹，创建 home 、may 、lauout 、login 等页面

在 src 目录下创建 router 文件夹，创建 index.jsx 文件，引入pages 内单独页面

// 导入页面组件
import Login from "../pages/Login";
import Home from "../pages/Home";
import Layout from "../pages/Layout";
import Shop from "../pages/Shop";
import May from "../pages/May";
const routerList = [
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/shop",
        element: <Shop />,
      },
      {
        path: "/may",
        element: <May />,
      },
    ],
  }
];

export default routerList;

2、打开 App.js 文件

引入路由文件，实现路由跳转

import "./App.css";
import RoutesComport from "./router"; // 路由组件
import { BrowserRouter as Router, useRoutes } from "react-router-dom";

function App() {
	// 引入路由组件
  const GetRoutes = () => useRoutes(RoutesComport);
  return (
    <Router>
      <GetRoutes />
    </Router>
  );
}

export default App;

四、引入 Ant Design Mobile 组件库

官网地址：mobile.ant.design/zh

$ npm install --save antd-mobile
# or
$ yarn add antd-mobile
# or
$ pnpm add antd-mobile

五、使用文件夹、文件、组件库创建

1、创建公共方法文件夹

在 src 下创建 utils 文件夹，在文件夹下创建 index 文件 token 文件

index.js 文件存放公用方法

// // 导入工具模块，统一暴露
import {
  setToken
  getToken
  removeToken
} from "./token";

export { setToken, getToken, removeToken };

token.js** token存放处

// 存查删 token

const setToken = (token) => {
  return localStorage.setItem("token-aa", token);
};

const getToken = () => {
  return localStorage.getItem("token-aa");
};


const removeToken = () => {
  return localStorage.removeItem("token-aa");
};


export { setToken,getToken, removeToken, };

选用项 公用方法暴露全局

在 index.js 文件内写入

import * as utils from "./utils/index.js";

// 暴露全局文件
Object.keys(utils).forEach((key) => {
  const newKey = "$" + key;
  React[newKey] = utils[key];
});

2、创建组件库文件夹

在 src 下创建 components 文件创建 AuthRoute 和 TableBar 文件夹

AuthRoute 文件用于路由拦截

注意路由权限判断是根据有无 token 来决定的，否则自动定位 login 页面

// AuthRoute.js
import React from "react";
import { Navigate } from "react-router-dom"; // Navigate 重定向
function AuthComponents({ children }) {
  // 获取token
  const token = React.$getToken();  // 暴露全局方法的书写方式

  // 判断有无 token
  if (token) {
    return <>{children}</>;
  } else {
    return <Navigate to={"/login"} replace />;
  }
}

export { AuthComponents };

TableBar 底部固定区域

// TableBar.jsx
import React, { useState } from "react";
import { Badge, TabBar } from "antd-mobile";
import { useNavigate } from "react-router-dom"; // Navigate 重定向
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import "./index.css";
import { AuthComponents } from ".././AuthRoute/index";
export default function Index() {
  const [activeKey, setActiveKey] = useState("/");
  let navigate = useNavigate();
  const tabs = [
    {
      key: "/",
      title: "首页",
      icon: <AppOutline />,
    },
    {
      key: "/shop",
      title: "待办",
      icon: <UnorderedListOutline />,
    },

    {
      key: "/may",
      title: "我的",
      icon: <UserOutline />,
    },
  ];
  return (
    <div>
      <AuthComponents>
        <TabBar
          className="tabbarCss"
          activeKey={activeKey}
          onChange={(value) => {
            console.log(value);
            setActiveKey(value);
            navigate(value);
          }}
        >
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </AuthComponents>
    </div>
  );
}

css样式

.tabbarCss {
  width: 100%;
  border: 1px solid;
  position: fixed;
  bottom: 0;
}

六、引入文件，实现交互

在 Layout 文件夹内引入底部导航 + 路由出口

完成基础页面封装

import React from "react";
import Tablebar from "../../components/TableBar";
import { Outlet } from "react-router-dom";
export default function Index() {
  return (
    <>
      <Outlet></Outlet>
      <Tablebar></Tablebar>
    </>
  );
}

react18 版本 移动端搭建（一章）