React-navigation use of the detailed

I. Introduction of open Source Library

This January, the new open source React-natvigation library is attracting attention. In just under 3 months, the number of stars on GitHub has reached 4000 +. FB recommends the use of libraries, and in react native currently the latest version 0.44 will be removed navigator. React-navigation is said to have a native performance experience. May become the mainstream army of future react native navigation components. This article is based on the "^1.0.0-beta.9" version to introduce the use and combat skills of the library. As you can see, although it's a beta version, it's basically stable and you can rest assured that you're using it in your project. The library contains three types of components:

(1) Stacknavigator: Used to jump pages and pass parameters
(2) Tabnavigator: Similar to the bottom navigation bar, used to switch between different interfaces on the same screen

(3) Drawernavigator: Slide menu navigation bar for easy setting of screen with drawer navigation

Second, the use of react-navigation

The specific content is broadly divided into the following:

(1) React-navigation Library Property Introduction

(2) Stacknavigator, tabnavigator to achieve the interface between the Jump, tab switch

(3) Stacknavigator interface between the jump, pass value, take value

(4) Drawernavigator implementation Drawer navigation menu

(5) Drawernavigator expansion function

(6) Custom react-navigation

1. Stacknavigator Property Introduction [HTML]  View Plain  copy navigationoptions: Configure some properties of Stacknavigator.           title: Title, if set the title of the Navigation bar and tab bar will become the same, do not recommend the use of         header: You can set some of the navigation properties, if you hide the top navigation bar just set this property to null        Headertitle: Set the navigation bar title, recommendations        headerbacktitle: Set the page to the left of the return arrow, the default is the title of the previous page. can be customized or set to null       headertruncatedbacktitle: Sets the default change to "back" when the last page title does not match the text returned by the arrow.        headerright: Sets the right side of the navigation bar. Can be a button or other view Control        headerleft: Sets the left side of the navigation bar. Can be a button or other view Control        headerstyle: Sets the style of the navigation bar. Background color, Width higher        headertitlestyle: Set navigation bar Text style         Headerbacktitlestyle: Set navigation bar ' back ' text style        headertintcolor: Set navigation bar color        headerpresscolorandroid: Android Unique set color texture, requires Android version greater than 5.0     &NBSp; gesturesenabled: Support for swipe back gesture, iOS default support, Android default off           screen: corresponding interface name, Pages that need to be filled in after import       mode: Define jump Style          card: Use iOS and Android default styles          modal:ios makes the screen draw from the bottom. iOS-like present effects       Headermode: Animation effects when returning to a parent page           Float:ios default Effects          screen: During sliding, the entire page will return           none: No animations       cardstyle: Custom settings Jump effects           transitionconfig:  Customizing settings sliding back configuration           Ontransitionstart: Features that are called when the conversion animation is about to start          ontransitionend: When the conversion animation is complete, the function that will be called       Path: Override mapping configuration for path set in route       initialroutename: Setting the default page component, which must be the registered page component above       initialrouteparams: Initial routing parameters   

Note: You may not understand path very well. The Path property applies to other apps or browsers that use URLs to open the app and go to the specified page. The Path property is used to declare an interface path, for example: "/pages/home". At this point we can enter: App Name://pages/home to launch the app and go to the home screen.

2. Tabnavigator Property Introduction
[HTML] view plain copy screen: And the function of navigation is the same, corresponding to the interface name, you can pass through this screen on other pages and jump. Navigationoptions: Configure some properties of the Tabnavigator title: title, set the navigation bar and the title of the tab bar tabbarvisible: Whether to hide the tab bar. Default does not hide (true) Tabbaricon: Sets the icon for the tab bar. You need to set Tabbarlabel for each: Set the title of the tab bar. Recommended