大家应该都有所体会,我们在一般应用都有跨标签跳转的需求,这就需要特别处理下路由,所以下面是使用react-navigation作为路由组件的一种方式。
<强>具体情境是:应用程序分三大模块家主页,比尔账单和我我的,对应三个选项卡。现在需求是推动HomeTwo, HomeTwo BillTwo, BillTwo返回到比尔账单首页。
首先选择路由结构,选择使用最外层是StackNavigator,然后包含3个TabNavigator和其他组件。
={const组件
HomeTwo:{屏幕:HomeTwo,路径:“app/HomeTwo”},
HomeThree:{屏幕:HomeThree,路径:“app/HomeThree”},
BillTwo:{屏幕:BillTwo,路径:“app/BillTwo”},
BillThree:{屏幕:BillThree,路径:“app/BillThree”},
}
const标签=TabNavigator ({
:{
屏幕:回家,
路径:“app/家庭”,
navigationOptions: {
tabBar: {
标签:“首页”,
图标:({tintColor})=比;(& lt;图像源={要求(“。/图片/home.png”)}风格={}({tintColor: tintColor}, styles.icon)/祝辞),
},
}
},
比尔:{
屏幕:比尔,
路径:“app/法案”,
navigationOptions: {
tabBar: {
标签:“账单”,
图标:({tintColor})=比;(& lt;图像源={要求(“。/图片/bill.png”)}风格={}({tintColor: tintColor}, styles.icon)/祝辞),
},
}
},
我:{
屏幕:我,
路径:“app/我”,
navigationOptions: {
tabBar: {
标签:“我”,
图标:({tintColor})=比;(& lt;图像源={要求(“。/图片/me.png”)}风格={}({tintColor: tintColor}, styles.icon)/祝辞),
},
}
}
}, {
tabBarPosition:“底”,
swipeEnabled:假的,
animationEnabled:假的,
lazyLoad:假的,
backBehavior:“没有”,
tabBarOptions: {
activeTintColor:“# ff8500 ',
inactiveTintColor: # 999,
showIcon:没错,
indicatorStyle: {
高度:0
},
风格:{
写成backgroundColor:“# fff ',
},
labelStyle: {
字形大小:10,
},
},
});
const净值=StackNavigator ({
:{屏幕:标签、路径:“app/Home”},
比尔:{屏幕:标签、路径:“app/比尔”},
我:{屏幕:标签、路径:“app/我”},
组件…
}, {
initialRouteName:“回家”,
navigationOptions: {
标题:{
风格:{
写成backgroundColor:“# fff”
},
titleStyle: {
颜色:“绿色”
}
},
cardStack: {
gesturesEnabled:真
}
},
模式:“卡”,
headerMode:“屏幕”
});
在HomeTwo里使用react-navigation自带的复位动作就可以重置路由信息了:
//把BillTwo
this.props.navigation.dispatch (resetAction);//使用复位动作重置路由
const resetAction=NavigationActions.reset ({
指数:1//注意不要越界
行动:[//栈里的路由信息会从家里→HomeTwo变成了比尔→BillTwo
NavigationActions。导航({routeName:“比尔”}),
NavigationActions。导航({routeName:‘BillTwo’})
]
});
从HomeTwo推到BillTwo页面后,点击BillTwo的左上角导航按钮返回就能返回到比尔账单首页了。
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
