Preface
Everyone should have some understanding. We have the need to jump across tabs in general applications, which requires special handling of routing. So the following is a way to use react-navigation as a routing component.
The specific situation is:The app is divided into three modules Home page, Bill Bill and Me, corresponding to three tabs. The current requirement is Home push HomeTwo, HomeTwo push BillTwo, BillTwo Return to the Bill Bill Home page.
The method is as follows:
First select the routing structure, choose to use the outermost layer is StackNavigator, and then include 3 TabNavigator and other components.
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: 'front page',
icon: ({tintColor}) => (<Image source={require('./images/')} style={[{tintColor: tintColor},]}/>),
},
}
},
Bill: {
screen: Bill,
path:'app/bill',
navigationOptions: {
tabBar: {
label: 'bill',
icon: ({tintColor}) => (<Image source={require('./images/')} style={[{tintColor: tintColor},]}/>),
},
}
},
Me: {
screen: Me,
path:'app/me',
navigationOptions: {
tabBar: {
label: 'I',
icon: ({tintColor}) => (<Image source={require('./images/')} 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'
});
You can reset the routing information by using the reset action provided by react-navigation in HomeTwo:
// push BillTwo
(resetAction);
// Use reset action to reset the routeconst resetAction = ({
index: 1, // Be careful not to cross the line actions: [ // The routing information in the stack will change from Home->HomeTwo to Bill->BillTwo ({ routeName: 'Bill'}),
({ routeName: 'BillTwo'})
]
});
After pushing from HomeTwo to BillTwo page, click the navigation button in the upper left corner of BillTwo to return to the home page of Bill bills.
Summarize
The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.