好客租房110-修改tabber样式外观

1删除前面页面路由的样式

2修改tabbar菜单项文字标题

3修改tabbar菜单文字标题颜色

4使用字体图标 修改tabber菜单的图标

5修改tabbar菜单项的图标大小

6调整tabbar菜单的位置 让其固定在最底部

import React from 'react'
import { TabBar } from 'antd-mobile'
 
 
//导入组件自己的样式文件
import "./index.css"
export default class Home extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      //	重定向
        selectedTab: 'blueTab',
      };
    }
  // 组件页面跳转
    renderContent(com) {
      return (
        <div>{com}</div>
      );
    }
    render() {
      return (
        <div className='home'>
          <TabBar
            unselectedTintColor="#21b97a"
            tintColor="#33A3F4"
            barTintColor="white"
          >
            {/* 首页 */}
            <TabBar.Item
              title="首页"
              key="home"
              icon={
                <i className='iconfont icon-ind'></i>
              }
              // 选中后的展示图片
              selectedIcon={
                <i className='iconfont icon-ind'></i>
              }
 
              
              // 是否选中
              selected={this.state.selectedTab === 'blueTab'}
              // bar 点击触发，需要自己改变组件 state & selecte={true}
              onPress={() => {
                this.setState({
                  selectedTab: 'blueTab',
                });
              }}
            >
                {/* // 将 home 组件作为实参传递
              {this.renderContent(<Home />)} */}
  
            </TabBar.Item>
            {/* 分类 */}
            <TabBar.Item
              icon={
                <i className='iconfont icon-findHouse'></i>
              }
              selectedIcon={
                <i className='iconfont icon-findHouse'></i>
              }
              title="搜索"
              key="category"
              selected={this.state.selectedTab === 'redTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'redTab',
                });
              }}
            >
              {/* {this.renderContent(<Category />)} */}
            </TabBar.Item>
            {/* 购物车 */}
            <TabBar.Item
              icon={
                <i className='iconfont icon-infom'></i>
              }
              selectedIcon={
                <i className='iconfont icon-infom'></i>
              }
              title="资讯"
              key="cart"
              dot
              selected={this.state.selectedTab === 'greenTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'greenTab',
                });
              }}
            >
              {/* {this.renderContent(<Cart />)} */}
            </TabBar.Item>
            {/* 用户 */}
            <TabBar.Item
              icon={<i className='iconfont icon-my'></i>}
              selectedIcon={<i className='iconfont icon-my'></i>}
              title="我的"
              key="user"
              selected={this.state.selectedTab === 'yellowTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'yellowTab',
                });
              }}
            >
              {/* {this.renderContent(<User />)} */}
            </TabBar.Item>
          </TabBar>
        </div>
      );
    }
  }

运行结果