react+typescript+antd-mobile(tabbar切换路由页面)

今天药忘吃喽~ 2022-12-01 14:23 275阅读 0赞

### 一、项目目录结构![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70_pic_center] ###

### 二、App.tsx ###

import React from "react";
    import Routes from "./router/index";
    function App() { 
    	return <Routes></Routes>;
    }
    
    export default App;

### 三、tabbar.tsx ###

import React, {  Component } from "react";
    import {  TabBar } from "antd-mobile";
    import {  withRouter, RouteComponentProps } from "react-router-dom";
    import "./tabbar.scss";
    
    interface IProps extends RouteComponentProps { }
    interface IState { }
    class Tabbar extends Component<IProps, IState> { 
    	constructor(prop: IProps) { 
    		super(prop);
    	}
    	state: IState = { };
    
    	render(): any { 
    		const pathname = this.props.location.pathname;
    		return (
    			<div className="tabbar">
    				<TabBar
    					unselectedTintColor="#949494"
    					tintColor="#33A3F4"
    					barTintColor="white"
    				>
    					<TabBar.Item
    						icon={ 
    							<div
    								style={ { 
    									width: "22px",
    									height: "22px",
    									background: `url(${ require("@/assets/image/home.png")}) center center / 21px 21px no-repeat`,
    								}}
    							/>
    						}
    						selectedIcon={ 
    							<div
    								style={ { 
    									width: "22px",
    									height: "22px",
    									background: `url(${ require("@/assets/image/home_active.png")}) center center / 21px 21px no-repeat`,
    								}}
    							/>
    						}
    						title="首页"
    						key="Home"
    						selected={ pathname === "/"}
    						onPress={ () => { 
    							this.props.history.replace("/");
    						}}
    					></TabBar.Item>
    					<TabBar.Item
    						icon={ 
    							<div
    								style={ { 
    									width: "22px",
    									height: "22px",
    									background: `url(${ require("@/assets/image/discover.png")}) center center / 21px 21px no-repeat`,
    								}}
    							/>
    						}
    						selectedIcon={ 
    							<div
    								style={ { 
    									width: "22px",
    									height: "22px",
    									background: `url(${ require("@/assets/image/discover_active.png")}) center center / 21px 21px no-repeat`,
    								}}
    							/>
    						}
    						title="发现"
    						key="Product"
    						selected={ pathname === "/product"}
    						onPress={ () => { 
    							this.props.history.replace("/product");
    						}}
    					></TabBar.Item>
    					<TabBar.Item
    						icon={ 
    							<div
    								style={ { 
    									width: "22px",
    									height: "22px",
    									background: `url(${ require("@/assets/image/my.png")}) center center / 21px 21px no-repeat`,
    								}}
    							/>
    						}
    						selectedIcon={ 
    							<div
    								style={ { 
    									width: "22px",
    									height: "22px",
    									background: `url(${ require("@/assets/image/my_active.png")}) center center / 21px 21px no-repeat`,
    								}}
    							/>
    						}
    						title="我的"
    						key="Person"
    						selected={ pathname === "/person"}
    						onPress={ () => { 
    							this.props.history.replace("/person");
    						}}
    					></TabBar.Item>
    				</TabBar>
    			</div>
    		);
    	}
    }
    export default withRouter(Tabbar);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/f6e9c1b52c4c48c8982edf7311a67192.png