tabBar.item
import React from 'react' import { TabBar } from 'antd-mobile' import {BrowserRouter as Router,Route, Link} from "react-router-dom" import News from "../News/index.js" import Index from "../Index/index.js" import HouseList from "../HouseList/index.js" import Profile from "../Profile/index.js" //导入组件自己的样式文件 import "./index.css" export default class Home extends React.Component { constructor(props) { super(props); this.state = { // 重定向 selectedTab:this.props.location.pathname, }; } renderTabBarItem(){ const tabItems=[{ title:"首页", icon:'icon-ind', path:"/home/index" }, { title:"搜索", icon:'icon-findHouse', path:"/home/list" }, { title:"资讯", icon:'icon-infom', path:"/home/news" }, { title:"我的", icon:'icon-my', path:"/home/profile" } ] return tabItems.map(item=> ( <TabBar.Item title={item.title} key={item.title} icon={ <i className={`iconfont ${item.icon}`}> } // 选中后的展示图片 selectedIcon={ iconfont ${item.icon}`}> } // 是否选中 selected={this.state.selectedTab === item.path} // bar 点击触发,需要自己改变组件 state & selecte={true} onPress={() => { this.setState({ selectedTab: item.path, }); //路由切换 this.props.history.push(item.path) }} > {/* // 将 home 组件作为实参传递 {this.renderContent()} */} ) ) } render() { return ( unselectedTintColor="#21b97a" tintColor="#33A3F4" barTintColor="white" noRenderContent={true} > {this.renderTabBarItem()} ); } }
运行结果