How to use navigation component react-navigation-JS Tutorial-php.cn

What I bring to you this time isNavigationEveryone should have some experience with how to use the component react-navigation. In general applications, we have the need to jump across tabs, which requires special handling. Nextrouting, this article will give you a good analysis.

The specific situation is: the app is divided into three major modules: Home, Bill and Me, corresponding to three tabs. The current requirement is Home push HomeTwo, HomeTwo push BillTwo, BillTwo Return to the Bill home page.

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}) => (), }, } }, 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, }, }, }); 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' });

Copy after login

Use the reset action that comes with react-navigation in HomeTwo to reset the routing information:

// push BillTwo this.props.navigation.dispatch(resetAction); // 使用reset action重置路由 const resetAction = NavigationActions.reset({ index: 1, // 注意不要越界 actions: [ // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo NavigationActions.navigate({ routeName: 'Bill'}), NavigationActions.navigate({ routeName: 'BillTwo'}) ] });

Copy after login

Push from HomeTwo After arriving at the BillTwo page, click the navigationbutton in the upper left corner of BillTwoto return to the Bill homepage.

I believe you have read the above introduction. After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!