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

How to use navigation component react-navigation

php中世界最好的语言

Release： 2017-12-30 17:59:00

Original

1768 people have browsed it

What I bring to you this time is NavigationEveryone 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. Next routing, 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:&#39;app/HomeTwo&#39; },
 HomeThree: { screen: HomeThree, path:&#39;app/HomeThree&#39; },
 BillTwo: { screen: BillTwo, path:&#39;app/BillTwo&#39; },
 BillThree: { screen: BillThree, path:&#39;app/BillThree&#39; },
}
  
const Tabs = TabNavigator({
 Home: {
  screen: Home,
  path:&#39;app/home&#39;,
  navigationOptions: { 
  tabBar: {
   label: &#39;首页&#39;,
   icon: ({tintColor}) => (<Image source={require(&#39;./images/home.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),
  },
  }
 },
 Bill: {
  screen: Bill,
  path:&#39;app/bill&#39;,
  navigationOptions: {
  tabBar: {
   label: &#39;账单&#39;,
   icon: ({tintColor}) => (<Image source={require(&#39;./images/bill.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),
  },
  }
 },
 Me: {
  screen: Me,
  path:&#39;app/me&#39;,
  navigationOptions: {
  tabBar: {
   label: &#39;我&#39;,
   icon: ({tintColor}) => (<Image source={require(&#39;./images/me.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),
  },
  }
 }
 }, {
 tabBarPosition: &#39;bottom&#39;, 
 swipeEnabled: false,
 animationEnabled: false, 
 lazyLoad: false, 
 backBehavior: &#39;none&#39;, 
 tabBarOptions: {
  activeTintColor: &#39;#ff8500&#39;, 
  inactiveTintColor: &#39;#999&#39;,
  showIcon: true, 
  indicatorStyle: {
  height: 0 
  },
  style: {
  backgroundColor: &#39;#fff&#39;, 
  },
  labelStyle: {
  fontSize: 10, 
  },
 },
 });
  
  
 const Navs = StackNavigator({
 Home: { screen: Tabs, path:&#39;app/Home&#39; },
 Bill: { screen: Tabs, path:&#39;app/Bill&#39; },
 Me: { screen: Tabs, path:&#39;app/Me&#39; },
 ...Components
 }, {
 initialRouteName: &#39;Home&#39;, 
 navigationOptions: { 
  header: { 
  style: {
   backgroundColor: &#39;#fff&#39;
  },
  titleStyle: {
   color: &#39;green&#39;
  }
  },
  cardStack: { 
  gesturesEnabled: true
  }
 },
 mode: &#39;card&#39;, 
 headerMode: &#39;screen&#39;
 });

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: &#39;Bill&#39;}),
 NavigationActions.navigate({ routeName: &#39;BillTwo&#39;})
 ]
});

Copy after login

Push from HomeTwo After arriving at the BillTwo page, click the navigation button in the upper left corner of BillTwo to 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!