React Native中导航组件react-navigation跨tab路由处理详解
前言
大家应该都有所体会，我们在一般应用都有跨tab跳转的需求，这就需要特别处理下路由，所以下面是使用react-navigation作为路由组件的一种方式.
具体情境是:app分三大模块Home主页,Bill账单和Me我的,对应三个tab.现在需求是HomepushHomeTwo,HomeTwopushBillTwo,BillTwo返回到Bill账单首页.
方法如下：
首先选择路由结构,选择使用最外层是StackNavigator,然后包含3个TabNavigator和其他组件.
constComponents={
HomeTwo:{screen:HomeTwo,path:'app/HomeTwo'},
HomeThree:{screen:HomeThree,path:'app/HomeThree'},
BillTwo:{screen:BillTwo,path:'app/BillTwo'},
BillThree:{screen:BillThree,path:'app/BillThree'},
}
constTabs=TabNavigator({
Home:{
screen:Home,
path:'app/home',
navigationOptions:{
tabBar:{
label:'首页',
icon:({tintColor})=>(),
},
}
},
Bill:{
screen:Bill,
path:'app/bill',
navigationOptions:{
tabBar:{
label:'账单',
icon:({tintColor})=>(),
},
}
},
Me:{
screen:Me,
path:'app/me',
navigationOptions:{
tabBar:{
label:'我',
icon:({tintColor})=>(),
},
}
}
},{
tabBarPosition:'bottom',
swipeEnabled:false,
animationEnabled:false,
lazyLoad:false,
backBehavior:'none',
tabBarOptions:{
activeTintColor:'#ff8500',
inactiveTintColor:'#999',
showIcon:true,
indicatorStyle:{
height:0
},
style:{
backgroundColor:'#fff',
},
labelStyle:{
fontSize:10,
},
},
});
constNavs=StackNavigator({
Home:{screen:Tabs,path:'app/Home'},
Bill:{screen:Tabs,path:'app/Bill'},
Me:{screen:Tabs,path:'app/Me'},
...Components
},{
initialRouteName:'Home',
navigationOptions:{
header:{
style:{
backgroundColor:'#fff'
},
titleStyle:{
color:'green'
}
},
cardStack:{
gesturesEnabled:true
}
},
mode:'card',
headerMode:'screen'
});
在HomeTwo里使用react-navigation自带的resetaction就可以重置路由信息了:
//pushBillTwo
this.props.navigation.dispatch(resetAction);
//使用resetaction重置路由
constresetAction=NavigationActions.reset({
index:1,//注意不要越界
actions:[//栈里的路由信息会从Home->HomeTwo变成了Bill->BillTwo
NavigationActions.navigate({routeName:'Bill'}),
NavigationActions.navigate({routeName:'BillTwo'})
]
});
从HomeTwopush到BillTwo页面后,点击BillTwo的左上角导航按钮返回就能返回到Bill账单首页了.
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。