Home > Web Front-end > JS Tutorial > body text

How to use navigation component react-navigation

php中世界最好的语言
Release: 2017-12-30 17:59:00
Original
1798 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:'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(&#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!

Related reading:

Answers to questions about camel case naming and JS

Boolean values, relational operators in JS, Detailed explanation and examples of logical operators

##js code case - calculate the day of the week based on the date

The above is the detailed content of How to use navigation component react-navigation. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template