React Native中导航组件react-navigation跨tab路由处理详解

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},styles.icon]}/>),  },  } }, Me: {  screen: Me,  path:'app/me',  navigationOptions: {  tabBar: {   label: '我',   icon: ({tintColor}) => (<Image source={require('./images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>),  },  } } }, { 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' });

// push BillTwothis.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'}) ]});