open source library introduced in January this year, the number of new react-natvigation base high-profile. In a short period of less than 3 months, the number of stars on GitHub has reached 4000+. Fb recommends the use of the library and deletes Navigator in the current latest version 0.44 of the React Native. React-navigation is said to have a native performance experience. It may become the mainstream of the future React Native navigation components. This article describes the use and practical skills of the library based on the ^1.0.0-beta.9 version. You can see, although it is the beta version, but basically stable, you can rest assured of the use of the project. In react-navigation

the official document library contains three components:
(1): StackNavigator used to jump page and pass parameters
(2) TabNavigator: similar to the bottom navigation bar, in the same screen under different switching interface
(3): DrawerNavigator sideslip the menu navigation bar, for easy setting with drawer navigation screen


two, the use of specific content can be divided as follows:
(1) react-navigation
(2) introduced the base attribute StackNavigator, TabNavigator interface between Tab jump, switch
(3) StackNavigator interface jump value, value,
(4) DrawerNavigator extraction The navigation menu
(5) DrawerNavigator (6) extension of the

1, StackNavigator custom attribute is introduced
navigationOptions: some attribute configuration StackNavigator.

  1. title: the title, if you set this navigation bar and tab title will become the same, does not recommend the use of
  2. header: you can set some attributes of navigation, if you hide the top navigation bar as long as this property is set to null
  3. headerTitle: set the navigation bar title, recommended
  4. headerBackTitle the left side of the page Jump: set the return arrow behind the text, the default is on a page title. You can customize, can also set up null
  5. headerTruncatedBackTitle: set when a page title does not conform to the return arrow after the text, the default to "return"
  6. headerRight: set the navigation bar on the right side. The button can view control
  7. headerLeft or other: set the navigation on the left. The button can view control
  8. or other

  9. headerStyle: set the navigation bar style. The background color, wide
  10. headerTitleStyle: set higher navigation
  11. headerBackTitleStyle text style: set the navigation bar 'return' text style
  12. headerTintColor:
  13. headerPressColorAndroid set navigation bar color: Android's unique set of color texture, need more than 5
  14. gesturesEnabled version of Android: whether to support the return sliding gestures, the default iOS support. Android

screen off by default: the corresponding interface name, need to fill in the import page after

mode: the definition of

card jump style: using Android iOS and

modal:iOS default style unique to draw from the bottom of the screen. Similar to the iOS present

headerMode effect: the return of superior page animation


screen default effect: in the process of sliding, the entire page will return to


cardStyle: no animation custom settings

  1. transitionConfig jump effect: custom setting sliding back the configuration of
  2. onTransitionStart: when the animation is about to be converted
  3. onTransitionEnd call function: when the transition animation completed, will be called the

path function: set the path routing in

initialRouteName covering mapping configuration: setting the default page component, must be registered above the

page component

initialRouteParams: initial road By

parameters note: you may not understand for path. The path attribute is suitable for other app or browsers to open the app and enter the specified page using URL. The path attribute is used to declare an interface path, such as: [/pages/Home]. At this point, we can enter the cell phone browser: the app Name: //pages/Home to start the App and enter the Home interface. The property of

2 and TabNavigator introduces

screen: the same function as navigation, corresponding to the interface name, which can be transmitted and jumps on other pages through this screen.

navigationOptions: TabNavigator configuration attributes

title: the title, will also set the navigation bar and tab bar Title

tabBarVisible: whether to hide the tab bar. Don't hide the default (true)

tabBarIcon: set the tab bar icons. Need to give each set

tabBarLabel: set the tab bar title. Recommended

navigation bar

tabBarPosition configuration: setting the position of tabbar, the default iOS at the bottom, at the top of Android by default. (attribute value:'top','bottom')

swipeEnabled: whether to allow the sliding

animationEnabled on the label: whether to display the animation between

lazy changes in the label: if necessary, lazy show label, not in advance, mean when app will open at the bottom of the tab bar to be loaded, the default false true

, recommended for

trueinitialRouteName: set the default page component

backBehavior: press the back key or jump to the first Tab (home), none

tabBarOptions: don't jump foreground configuration tab bar of some properties of the iOS

activeTintColor:label and icon attribute active background color

activeBackgroundColor:label and icon under the condition of active state

inactiveTintColor:label and icon in the active state of the background color

inactiveBackgroundColor:label and icon in the active state

showLabel: whether to display the label foreground foreground is enabled by default style:tabbar style

labelStyle: label Android

activeTintColor:label style attribute and icon active state

inactiveTintColor:label and icon is not active under the condition of

showIcon: whether to display the icon, the default

showLabel closed: whether to display the label style, upperCaseLabel style style:tabbar is enabled by default

labelStyle:label: whether to label uppercase, the default is true

pressColor:material ripple effect color (an Android version needs to be greater than 5)

pressOpacity: press the label change transparency (Android version required less than 5)

scrollEnabled: whether to enable the scrolling tab of the tabStyle:tab style

indicatorStyle: style object label indicator (tab at the bottom of the line). Android will be more of a bottom line, height can be set to 0 to temporarily solve this problem

labelStyle:label style


3, DrawerNavigator style icon

DrawerNavigatorConfig attributes introduced

  1. drawerWidth -
  2. drawerPosition - drawer width option is left or right. The default is left position
  3. component

  4. contentComponent - drawer for presenting content, such as navigation. Receive the navigation of the drawer. The default routeNames DrawerItems
  5. contentOptions array configuration

initialRouteName content drawer - initial routeName


order - definition of drawer item sequence.

routeName to provide path mapping path configuration, it covers a set path in routeConfigs.

backBehavior - the back button will switch to the initial route? If it is, set to initialRoute, otherwise none. The default behavior for initialRoute

DrawerItems contentOptions

  1. activeTintColor attribute - label label and icon color
  2. activeBackgroundColor - label background color
  3. inactiveTintColor - non movable label and icon color
  4. inactiveBackgroundColor - non active label background color

the content of part of the style


labelStyle - when your label is a string, to cover part of the text in the style of the sample type object
from the above general understanding of some of the react-navigation three components of the basic attributes, so we left the sleeves to witness the miracle of the code.

4, using StackNavigator + TabNavigator to achieve Tab interface switching, interface between


API definition: StackNavigator (RouteConfigs, StackNavigatorConfig), TabNavigator (RouteConfigs, TabNavigatorConfig)

(1): react-navigation integrated in the terminal NPM install react-navigation [--save] Executive

(2) interface components:

 import into the necessary {StackNavigator TabNavigator, TabBarBottom}, from'react-navigation'import HomeScreen from'./pages/; HomePage' import; MineScreen from'./pages/MinePage'; 

(3) TabNavigator:

 const Tab definition = TabNavigator {Home:{(screen:HomeScreen, navigationOptions: ({navigation}) => tabBarLabel:' ({home ', tabB ArIcon: ({focused, tintColor}) => (< TabBarItem; tintColor={tintColor} focused={focused} normalImage={require ('./imgs/nav_fav@2x.png') selectedImage={require ('./imgs/nav_fav_actived@3x.png') />}}}});), Mine:{, screen: MineScreen, navigationOptions: ({navigation}) => (I {tabBarLabel:'', tabBarIcon: ({focused, tintColor}) => (< TabBarItem tintColor={tintColor}; focused={focused} (normalImage={require'./imgs/tab_me_nor@3x.png'selectedImage={require ('./imgs/tab_me_selected@2x.png')})}})}, />);}, {tabBarComponent:TabBarBottom, tabBarPosition:'bottom', swipeEnable. D:false, animationEnabled:false, lazy:true, tabBarOptions:{, activeTintColor:'#06c1ae', inactiveTintColor:'#979797', style:{backgroundColor:'#ffffff', labelStyle: {fontSize:}, 20}}} / / text size, 



 import package components: 

React, {Component} from'react'; import {Image} from'react-native'export default class TabBarItem extends; Component {render ({return (<) Image; source={this.props.focused this.props.selectedImag?

This concludes the body part