8.react+antd mobile项目实战---创建tabbar

1.创建项目，安装antd mobil

使用的是Tabbar

//关键代码
state = {
    // 默认选中的TabBar菜单项，this.props.location.pathname路由
    selectedTab: this.props.location.pathname
  }

// 渲染 TabBar.Item
   renderTabBarItem() {
    return tabItems.map(item => (
      <TabBar.Item
        title={item.title}
        key={item.title}
        icon={<i className={`iconfont ${item.icon}`} />}
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        //默认选中的第一个tabbar
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path
          })

          // 路由切换
          this.props.history.push(item.path)
        }}
      />
    ))
  }

全部代码

import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import News from '../News'
import { TabBar } from 'antd-mobile'
// 导入组件自己的样式文件
import './index.css'
// TabBar 数据
const tabItems = [
  {
    title: '首页',
    icon: 'icon-ind',
    path: '/home',
  },
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list',
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news',
  },
  {
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile',
  },
]
export default class Home extends Component {
  state = {
    // 默认选中的TabBar菜单项，this.props.location.pathname路由
    selectedTab: this.props.location.pathname
  }
   // 渲染 TabBar.Item
   renderTabBarItem() {
    return tabItems.map(item => (
      <TabBar.Item
        title={item.title}
        key={item.title}
        icon={<i className={`iconfont ${item.icon}`} />}
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path
          })

          // 路由切换
          this.props.history.push(item.path)
        }}
      />
    ))
  }
  render() {
    return (
      <div className='home'>
        {/* <Route exact path="/home/news" component={News} /> */}
        <TabBar tintColor="#50D0BC" noRenderContent={true} barTintColor="white">
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    )
  }
}

2.安装react-route,配置路由重定向

 {/* 默认路由匹配时，跳转到 /home 实现路由重定向到首页 */}
<Route path="/" exact render={() => <Redirect to="/home" />} />

//app.js
import React, { lazy, Suspense } from 'react'
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'
// 导入首页和城市选择两个组件（页面）
import Home from './pages/Home'
// 路由访问控制组件
import AuthRoute from './components/AuthRoute'
// 使用动态组件的方式导入组件：
const CityList = lazy(() => import('./pages/CityList'))
const Map = lazy(() => import('./pages/Map'))
const HouseDetail = lazy(() => import('./pages/HouseDetail'))
const Login = lazy(() => import('./pages/Login'))
const Registe = lazy(() => import('./pages/Registe'))
const Rent = lazy(() => import('./pages/Rent'))
const RentAdd = lazy(() => import('./pages/Rent/Add'))
const RentSearch = lazy(() => import('./pages/Rent/Search'))

function App() {
  return (
    <Router>
      <Suspense fallback={<div className="route-loading">loading...</div>}>
        <div className="{`App ${}`}">
          {/* 默认路由匹配时，跳转到 /home 实现路由重定向到首页 */}
          <Route path="/" exact render={() => <Redirect to="/home" />} />
          {/* 配置路由 */}
          {/* Home 组件是父路由的内容 */}
          <Route path="/home" component={Home} />
          <Route path="/citylist" component={CityList} />
          <Route path="/map" component={Map} />

          {/* 房源详情的路由规则： */}
          <Route path="/detail/:id" component={HouseDetail} />
          <Route path="/login" component={Login} />
          <Route path="/registe" component={Registe} />

          {/* 配置登录后，才能访问的页面 */}
          <AuthRoute exact path="/rent" component={Rent} />
          <AuthRoute path="/rent/add" component={RentAdd} />
          <AuthRoute path="/rent/search" component={RentSearch} />
        </div>
      </Suspense>
    </Router>
  )
}

export default App