React学习（六）-antd-moblie的TabBar组件搭配Route的使用

一.前言

　　移动端web较为常见的使用了标签栏，如下。可以通过切换该tab选项来展示不同的内容。

 

 

 　　在antd-moblile中，TabBar是标签栏的组件。现在要和react-route搭配，来给它定义四个路由，每个url对应一个标签。

二.路由定义

　　参照之前react学习中route的使用。在App.jsx中，设置路由，不同url对应不同组件。

render() {
    return (
        <Router>
            <Home>
                <Route path="/" exact component={Index} />
                <Route path="/tab1" component={Tab1} />
                <Route path="/tab2" component={Tab2} />
                <Route path="/tab3" component={Tab3} />
            </Home>
        </Router>
    );
}

　　在Home组件中，引用TabBar组件。思路是，Home为父组件，当路由为对应url时，它可以输出子路由组件的内容。

{this.props.children}

　　根据这个路由，那么可以在Home进行判断处理，来控制TabBar的显示。

componentDidMount() {
    switch (this.props.location.pathname) {
        case '/':
            this.setState({ selectedTab: 'index' });
            break
        case '/tab1':
            this.setState({ selectedTab: 'tab1' });
            break
        case '/tab2':
            this.setState({ selectedTab: 'tab2' });
            break
        case '/tab3':
            this.setState({ selectedTab: 'tab3' });
            break
        default:
            break;
    }
}

　　同时TabBar的点击事件也可以改变url。这个是切换路由的方法。

changeUrl(url) {
    this.props.history.push(url);
}

　　注意，上面this.props.history直接使用会有问题。需要对Home进行处理，这样父组件的路由信息才能传递过来。

import { withRouter} from 'react-router-dom';

export default withRouter(Home);

　　贴上代码以供参考。Home.jsx

var React = require('react');
import { withRouter} from 'react-router-dom';
import { TabBar } from 'antd-mobile';

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'index'
        };
        this.changeUrl.bind(this);
    }

    componentDidMount() {
        switch (this.props.location.pathname) {
            case '/':
                this.setState({ selectedTab: 'index' });
                break
            case '/tab1':
                this.setState({ selectedTab: 'tab1' });
                break
            case '/tab2':
                this.setState({ selectedTab: 'tab2' });
                break
            case '/tab3':
                this.setState({ selectedTab: 'tab3' });
                break
            default:
                break;
        }
    }

    changeUrl(url) {
        this.props.history.push(url);
    }

    render() {
        return <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#33A3F4"
                barTintColor="white"
            >
                <TabBar.Item
                    title="首页"
                    key="首页"
                    icon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat'
                    }}
                    />
                    }
                    selectedIcon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
                    }}
                    />
                    }
                    selected={this.state.selectedTab === 'index'}
                    badge={1}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'index',
                        });
                        this.changeUrl("/");
                    }}
                    data-seed="logId"
                >
                    {this.props.children}

                </TabBar.Item>
                <TabBar.Item
                    icon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat'
                        }}
                        />
                    }
                    selectedIcon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat'
                        }}
                        />
                    }
                    title="合作"
                    key="合作"
                    badge={'new'}
                    selected={this.state.selectedTab === 'tab1'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'tab1',
                        });
                        this.changeUrl("/tab1");
                    }}
                    data-seed="logId1"
                >
                    {this.props.children}
                </TabBar.Item>
                <TabBar.Item
                    icon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat'
                        }}
                        />
                    }
                    selectedIcon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat'
                        }}
                        />
                    }
                    title="客服"
                    key="客服"
                    dot
                    selected={this.state.selectedTab === 'tab2'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'tab2',
                        });
                        this.changeUrl("/tab2");
                    }}
                >
                    {this.props.children}
                </TabBar.Item>
                <TabBar.Item
                    icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
                    selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
                    title="我的"
                    key="我的"
                    selected={this.state.selectedTab === 'tab3'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'tab3',
                        });
                        this.changeUrl("/tab3");
                    }}
                >
                    {this.props.children}
                </TabBar.Item>
            </TabBar>
        </div>;
    }
}

export default withRouter(Home);