一般应用都有跨tab跳转的需求,这就需要特别处理下路由. 下面是使用React-navigation
作为路由组件的一种方式.http://www.bijishequ.com/detail/369321
具体情境是: app分三大模块Home
主页,Bill
账单和Me
我的,对应三个tab. 现在需求是Home
pushHomeTwo
,244);">HomeTwopushBillTwo
,244);">BillTwo返回到Bill
账单首页.
首先选择路由结构,选择使用最外层是StackNavigator
,然后包含3个TabNavigator
和其他组件.
- const Components = {
- HomeTwo: { screen: HomeTwo,path:'app/HomeTwo' },HomeThree: { screen: HomeThree,path:'app/HomeThree' },BillTwo: { screen: BillTwo,path:'app/BillTwo' },BillThree: { screen: BillThree,path:'app/BillThree' },}
- 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,});
- 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
就可以重置路由信息了:
从HomeTwo
push 到BillTwo
页面后,点击BillTwo
的左上角导航按钮返回就能返回到Bill
账单首页了.
http://www.bijishequ.com/detail/369321