注意看图片,下面的效果,是不是你想要的?
首页,办事处,趋势,组成一个tabbar,点击首页和办事处,页面时正常的tabbar切换,底部tabbar导航也存在底部,但是点击趋势时,tabbar跳转了,因为底部tabbar不在显示在底部,并且趋势页面有返回按钮。
这个效果,也是前几天乘公交车使用某某宝付款无意发现的,发现乘车码的页面是利用 tabbar底部导航 然后再跳转过去的,我就很纳闷,按照道理,底部 tabbar 直接切换页面就好了,为什么还要跳转一个新的路由进行切换?原本写在的 tabbar 里面的导航也可以正常页面切换,为什么还要这么写?作为程序员,必须搞下!!!!!!!!!
那就来一个我项目里面的tabbar,效果和某某宝付款一样。(原本想供上截图,但是我手机的系统服务,提示我........无法抓取。看来还是某某宝厉害!)
我路由用的react-native-router-flux,上一个文章也说了,学习成本低,公司太小。建议用react-navigator,比较官方。
在tabbar中有一个tabBarOnPress函数,我是直接写scence里面了,也没有也没有报错!
Actions.Fourbanshichuqss()会跳转到你写好的路由,之前的你已经写好的默认 key='' 和 component={}都会被这个新的key重新引导,按照相应的Actions指定的key来跳转。
<Tabs
swipeEnabled={true}
wrap={false}
hideNavBar
upperCaseLabel={true}
showLabel={true}
tabBarStyle={{backgroundColor: "#fff",borderTopWidth:1,borderTopColor:'#ddd'}}
tabStyle={{backgroundColor: "#fff"}}
labelStyle={{fontSize:14}}
activeBackgroundColor="#2aabe4"
inactiveBackgroundColor="#999"
activeTintColor='#2aabe4'
inactiveTintColor='#999'
>
<Scene
hideNavBar
icon={TabIconfir}
key='Fourbanshichu'
component={Fourbanshichu} title='首页'/>
<Scene
hideNavBar
icon={TabIconth}
key='Fourbanshichuqs'
component={Fourbanshichuqs} title='趋势' tabBarOnPress={()=>{Actions.Fourbanshichuqss()}}/>
</Tabs>