Ant-design-mobile: TabBar结合react-router取巧解决办法

[lslvxy]

TabBar类似Tabs无法动态加载路由，想到了一个投机取巧的办法：

假如有3个tab，那么就写3个页面，将TabBar复制3份，每一个TabBar中只有一个Tab是有内容的，其他两个为空，默认选择有内容的这个Tab。

路由配置则分3个路由到这3个页面上，然后切换路由的时候切换页面，看起来就像是切换Tab一样。

我配置的路由是

```

然后home1,2,3内容都是一样，主要差别有两点：

一个是默认的selectedTab不一样，home1中selectedTab=‘home1’，home2中selectedTab=‘home2’

然后在home1中的Tab内容为

title="用户"
key="farmer"
icon={require('../imgs/farmer.png')}
selectedIcon={require('../imgs/farmer-blue.png')}
selected={this.state.selectedTab === 'farmer'}
onPress={() => {
ctx.history.push('/f');
}}
data-seed="farmer"
>
{this.props.children}

icon={require('../imgs/servicelog.png')}
selectedIcon={require('../imgs/servicelog-blue.png')}
title="服务"
key="servicelog"
selected={this.state.selectedTab === 'servicelog'}
onPress={() => {
ctx.history.push('/s');
}}
data-seed="servicelog"
>

icon={require('../imgs/user.png')}
selectedIcon={require('../imgs/user-blue.png')}
title="我"
key="user"
selected={this.state.selectedTab === 'user'}
onPress={() => {
ctx.history.push('/u');
}}
data-seed="user"
>

```

注意第一个Tab的字内容为{this.props.children}，其他两个Tab内容为空，home2,3同理。

这样就可以实现TabBar加载路由了。

[hjue]

 onPress={() => {
            ctx.history.push('/f');
        }}

ctx 是在哪里定义的 @lslvxy

[lslvxy]

@hjue ctx.history==hashHistory,只是放到一个全局变量里面了

[yeyuguo]

目瞪口呆... 这样的效果代码后面还能继续玩下去吗

[lslvxy]

我的项目就是这么实现的,而且也没有太多的重复和冗余代码.如果有更好的办法可以探讨一下

[paranoidjk]

@lslvxy

• TabBar实现的是单页内的内容切换
• 你的需求相当于底部的一个导航菜单点击就跳转了，为何要用TabBar? 用React-Router的<Link>组件，自己写样式应该也很容易实现的

[yvanwangl]

这里有我的一个实践，希望能帮助到大家，欢迎大家讨论：
https://github.com/yvanwangl/AntMobileDemo

[flyfox11]

请问作者，tabbar在react-router4里该怎么写，网上也搜了一圈又一圈，没有合适的。

[joannau]

可以只用写一个Home组件，通说this.props.match.url 来得知路由，判断是要加载哪个模块。然后通过TabBar.Item的selected === 路由的key值，来实现具体展示。