react-native-router-flux tabbar 底部导航 跳转,跳转到新页面,tabbar点击事件,页面跳转切换

注意看图片,下面的效果,是不是你想要的?

首页,办事处,趋势,组成一个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>


版权声明:本文为hopefullman原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。