前言
大家应该都有所体会，我们在一般应用都有跨tab跳转的需求， 这就需要特别处理下路由，所以 下面是使用react-navigation作为路由组件的一种方式.
具体情境是:
app分三大模块Home主页,Bill账单和Me我的,对应三个tab. 现在需求是 Home push HomeTwo,HomeTwo push BillTwo,BillTwo 返回到 Bill账单首页.方法如下：
首先选择路由结构,选择使用最外层是StackNavigator,然后包含3个TabNavigator和其他组件.
const Tabs = TabNavigator({
Home: {
screen: Home,path:'app/home',navigationOptions: {
tabBar: {
label: '首页',icon: ({tintColor}) => (<Image source={require('./images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>),},}
},Bill: {
screen: Bill,path:'app/bill',navigationOptions: {
tabBar: {
label: '账单',icon: ({tintColor}) => (<Image source={require('./images/bill.png')} style={[{tintColor: tintColor},Me: {
screen: Me,path:'app/me',navigationOptions: {
tabBar: {
label: '我',icon: ({tintColor}) => (<Image source={require('./images/me.png')} style={[{tintColor: 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,});
Home: {
screen: Home,path:'app/home',navigationOptions: {
tabBar: {
label: '首页',icon: ({tintColor}) => (<Image source={require('./images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>),},}
},Bill: {
screen: Bill,path:'app/bill',navigationOptions: {
tabBar: {
label: '账单',icon: ({tintColor}) => (<Image source={require('./images/bill.png')} style={[{tintColor: tintColor},Me: {
screen: Me,path:'app/me',navigationOptions: {
tabBar: {
label: '我',icon: ({tintColor}) => (<Image source={require('./images/me.png')} style={[{tintColor: 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,});
const Navs = 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自带的reset action就可以重置路由信息了:
// 使用reset action重置路由
const resetAction = NavigationActions.reset({
index: 1,// 注意不要越界
actions: [ // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo
NavigationActions.navigate({ routeName: 'Bill'}),NavigationActions.navigate({ routeName: 'BillTwo'})
]
});
const resetAction = NavigationActions.reset({
index: 1,// 注意不要越界
actions: [ // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo
NavigationActions.navigate({ routeName: 'Bill'}),NavigationActions.navigate({ routeName: 'BillTwo'})
]
});
从HomeTwo push 到 BillTwo页面后,点击BillTwo的左上角导航按钮返回就能返回到Bill账单首页了.
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
