"REACT NATIVE Series Tutorial Five" NAVIGATOR (page navigation) basic use and parameters

This site article is Li Himi original, reproduced must be clearly noted:
Reprinted from "Black Rice gamedev Block" original link: http://www.himigame.com/react-native/2248.html

Today introduces a common component for page switching and navigation in application development: Navigator

One: Navigator

The main function for page navigation is that each page knows which page it should switch to, and where the page will be recorded, and if so, what page to return to. There is no need for logical management of all this! And the parameters can be passed between each page, very convenient components. Not much nonsense said: first on the sample code:

First we import the Navigator component:

Import React, {... Navigator, ...} From ' react-native ';

How to use:

Render ()  {    return  (        < Navigator            initialroute={{ name:   ' FirstPage ', component: firstpage }}             configurescene={(Route)  => {                return Navigator.SceneConfigs.HorizontalSwipeJump;             }}             renderscene={(Route, navigator)  => {             let Component = route.component;             return <component {...route.params}  navigator={navigator}/>            }}            />  )}

The above code, initialized the navigation component, and set the default display page to FirstPage, there are two points to note:

1. We mainly focus on two parameters in Navigator Initialroute:

Name: Component Name

Component: Component class name

Himi import FirstPage is as follows:

Import FirstPage from './firstpage '

So name and component are all filled in for firstpage

2. <component {... route.params} navigator={navigator}/>

The above line is to pass the navigator as a props

3. Navigator.SceneConfigs.HorizontalSwipeJump

The above line is to set the animation between page transitions, more effects view the source file:

Node_modules/react-native/libraries/customcomponents/navigator/navigatorsceneconfigs.js

let's look at the following firstpage.js :

Import react, {  appregistry,  component,  view,  text,   StyleSheet,  TouchableHighlight,} from  ' react-native '; import secondpage  from  './secondpage '; class firstpage extends react.component {constructor (props)  {super (props); this.state = { };}   nextevent () {    const { navigator } = this.props;     if (navigator)  {      navigator.push ({           name:  ' Secondpage ',           component: SecondPage,            params: {            titletext: "           }      })     }  }  render ()  {    return   (<view style={styles.himiviewstyle} ><text style={styles.himitextstyle}>himi  React Native  Tutorials  </Text><View style={styles.himiViewStyle}> < Touchablehighlight   underlaycolor= ' #4169e1 '   onpress={this.nextevent.bind (This)}     >     <Text style={styles.text} >  Click I go to [secondpage] page  </text></touchablehighlight></view>    </ view>  )} };var styles = stylesheet.create ({  text: {     color: ' #f00 ',     fontsize:20,  },  himiviewstyle:{     flex: 1,    flexDirection:  ' column ',     justifyContent:  ' Center',    alignitems:  ' center ',    backgroundcolor:  ' #F5FCFF ',   },  himitextstyle:{    color: ' #f00 ',     fontsize : 30,    margintop:70,  },  });module.exports = firstpage;

Here we mainly look at the NextEvent function content,

const {Navigator} = This.props; This sentence is received by the navigator of the props passed over.

Get the Navigator component, you can use its push and pop two functions to switch the next page and back to the previous page operation.

The following code snippet demonstrates how to switch to the next page:

if (navigator) {//Determines whether the incoming navigation component is normally received Navigator.push ({//Use this function to switch to the specified page name: ' Secondpage ',//target Component name component : Secondpage,//Target component class name params: {titletext: '}}}}

It is also necessary to emphasize the params, which is the form of the parameter written to the next page when the page is toggled.

When obtained, the direct this.props.titleText can be obtained, simple and convenient.

The following code snippet shows how to return to the previous page:

const {Navigator} = This.props; if (navigator) {Navigator.pop ();}

It's very simple to go back to the previous page, not to repeat it.

himi here to demonstrate the effect, so the following  threepage.js also gives source code: (last attached dynamic)

Import react, {  appregistry,  component,  view,  text,   Alert,  StyleSheet,  TouchableHighlight,} from  ' react-native '; export  default class threepage extends react.component {constructor (props)  {super (props); this.state = { };}   backevent () {    const { navigator } = this.props;     if (navigator)  {        navigator.pop ();     }  }    render ()  {    return   (<View style={styles.himiViewStyle} ><Text style={styles.himiTextStyle}>  ThreePage </Text>            < View style={styles.himiviewstyle}>         &lT Touchablehighlight           underlaycolor= ' #4169e1 '           onpress={this.backevent.bind (This)}             >              <Text style={styles.text} >   back to [Secondpage] page  </Text>        </TouchableHighlight>       </View>    </View>  )} };var  Styles = stylesheet.create ({  text: {    color: ' #f00 ',     fontsize:20,  },  himiviewstyle:{    flex: 1,     flexDirection:  ' column ',    justifycontent:  ' center ',     alignitems: ‘ Center ',    backgroundcolor:  ' #F5FCFF ',   },  himitextstyle:{     color: ' #f00 ',     fontsize:30,    margintop:70,   },  });

Run: (Click to view dynamic effects)

650) this.width=650; "class=" Alignnone size-medium wp-image-2249 "src=" http://www.himigame.com/wp-content/uploads/ 2016/05/user23-162x300.gif "alt=" User23 "width=" 162 "height=" "style=" margin:0px;padding:1px;border:1px solid RGB (97,146,140); font-family:inherit;font-size:inherit;font-style:inherit;line-height:inherit;height:auto; "/>

From the effect can be seen, the switch between the page can be directly through the gesture swipe to switch ~:)

This article is from the "Li Himi" blog, please be sure to keep this source http://xiaominghimi.blog.51cto.com/2614927/1782626

"REACT NATIVE Series Tutorial Five" NAVIGATOR (page navigation) basic use and parameters