React-native Delicacy Program-scene switching (Navigator)

In the article "React-native early adopters plan-the environment constructs" to narrate the react-native environment constructs, and has initialized the React-native first project. If you have completed your previous article and successfully debugged the first "Hello World" project, you have successfully taken the first step and the next study will be much smoother. After I successfully debug the first project, even the index.android.js of the next native code and code, there are many questions in mind, the first question is: react-native How to do multiple page jump. Believe you also, with a problem to learn is more motivated to learn a way.

Toggle Scene Demo

This chapter focuses on the demo,react-native scene switching demo download address: Https://github.com/liuguangli/RN-DemoForChangeSence.

First run out of effect, from the phenomenon to the essence of human general cognitive law, suggested that the reader download demo on their own research, I also hope you study the demo after the text is not read.

Navigator warm up

React-natvie to switch the page of an important component is navigator, here only to introduce a few of the important features and methods used in the demo, detailed can click here to see the official documentation.

1 Initialroute

A property of the Navigator that describes the first scene information route in the Navigator scene stack. A structure type, one like to provide descriptive information such as Name,index.

2 rendersence

A method of Navigator that recalls the rendersence (route, Navigator) method at the time of Navigator creation or push (route)/pop () method invocation, and exits two parameters: route and Navigator itself.

3 push

Scene Jump: Specifies a route that, in the callback method Rendersence (), returns the specified sence,sence according to route as any visual component or container.

4 Pop

Rewind to the previous scene.

Step-by -Step to achieve this demo

1. Entrance (index.android.js)

We first complete the first portal component of react and register it on the app.

First we introduce the build we want to use:

var react = require (' react-native ');
var {
  appregistry,
  Navigator,
} = react;

Appregistry, for registering our program entry components. Navigator is the first component we use to manipulate scene transitions.

To create a component:

Create Portal component
var changesenceproject = React.createclass ({
  render:function () {
    var initialroute = {name: "A"};< C3/>return (<navigator 
     Initialroute={initialroute}
     renderscene={routemapper}
     />)
  },

} );

Register to Application:

Registered Project
appregistry.registercomponent (' Changesenceproject ', () => changesenceproject);

Notice that we use the Navigator component in the Changesenceproject entry method render and provide the first route object: {name: "a"} and a Rendersence method that must be implemented, so we're going to React.createclass first implement Rendersence method, our method name is defined as: Routemapper

Navigator Jump Rule
var routemapper = function (route,navigation,oncomponent) {
   //todo, return the corresponding scene according to Route
};

Here I do not implement the logic, and so on the completion of the two scene page of our door to achieve the logic here.

2. Android native

We use Reactrootview to host our interactive components.

Main_activity.xml:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"
    xmlns:tools= "http:// Schemas.android.com/tools "
    android:layout_width=" match_parent "
    android:layout_height=" Match_parent "
    tools:context= ". Moviesapp ">
    <com.facebook.react.reactrootview
        android:layout_width=" Match_parent "
        android: layout_height= "Match_parent"
        android:id= "@+id/react_root_view"/>
</RelativeLayout>

Mainactivity.java

Package com.changesence;
Import android.app.Activity;
Import Android.os.Bundle;
Import android.view.KeyEvent;
Import Com.facebook.react.LifecycleState;
Import Com.facebook.react.ReactInstanceManager;
Import Com.facebook.react.ReactRootView;
Import Com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
Import Com.facebook.react.shell.MainReactPackage; public class Mainactivity extends activity implements Defaulthardwarebackbtnhandler {private Reactinstancemanager MR

    Eactinstancemanager;
        @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);

        Setcontentview (R.layout.activity_main); Mreactinstancemanager = Reactinstancemanager.builder (). Setapplication (Getapplication ()). Setbundleassetname ("Index.android.bundle"). Setjsmainmodulename ("Index.android"). Addpacka
      GE (New Mainreactpackage ()). Setusedevelopersupport (True)          . Setinitiallifecyclestate (lifecyclestate.resumed). build (); ((Reactrootview) Findviewbyid (R.id.react_root_view)). Startreactapplication (Mreactinstancemanager, "change
    Senceproject ", NULL); @Override public boolean onKeyUp (int keycode, keyevent event) {if (keycode = = Keyevent.keycode_menu &A
            mp;& Mreactinstancemanager!= null) {Mreactinstancemanager.showdevoptionsdialog ();
        return true;
    Return Super.onkeyup (KeyCode, event);

        } @Override protected void OnPause () {super.onpause ();
        if (Mreactinstancemanager!= null) {mreactinstancemanager.onpause ();

        }} @Override protected void Onresume () {super.onresume ();
        if (Mreactinstancemanager!= null) {Mreactinstancemanager.onresume (this); @Override public void onbackpressed () {if Mreactinstancemanager!= NULL) {mreactinstancemanager.onbackpressed ();
        else {super.onbackpressed ();
    @Override public void invokedefaultonbackpressed () {super.onbackpressed (); }
}

Note: The first parameter of the Startreactapplication () method must be the same as the name of the project we registered in Appregistry.
So far, the project can run, but what you see is a blank page, because Routemapper hasn't been implemented yet, we need to provide the scenario logic.

3. Scene A (sencea.js)

In scene a we simply display a line of text and then click Text to jump to scene B.

Directly on code: Sencea.js

' Use strict ';
var react = require (' react-native ');
var {
  touchablenativefeedback,
  Navigator,
  StyleSheet,
  Text,
  View,
} = react;
var sencea = React.createclass ({
  //touch event callback
 touch:function (target:object) {
  This.props.navigator.push (
   {
    title: "B",
    name: "B"
   } 
  );
 },
 render:function () { Return
 	(<view style={styles.container}>
      <touchablenativefeedback
       Onpress={this.touch} >
       <View>
         <Text> ' This are sencea,click to Senceb ' </Text>
       </View>  
      < /touchablenativefeedback> 
      </View>);
var styles = stylesheet.create ({
  container: {
    flex:1,
    justifycontent: ' Center ',
    alignitems: ' Center ',
    backgroundcolor: ' #F5FCFF ',
  },
});
Export the scene for external require
module.exports = Sencea;

4 Scene B

The scene is the same as the scene a, and the display is different. Directly on code: Senceb.js

'use strict';
var React = require('react-native');
var {
  TouchableNativeFeedback,
  Navigator,
  StyleSheet,
  Text,
  View,
} = React;

var SenceB = React.createClass({
 touch: function(target:Object){
   if (this.props.navigator.getCurrentRoutes().length>1) {
    this.props.navigator.pop();
   };
  
 },
 render: function() {
 	return (<View style={styles.container}>
      <TouchableNativeFeedback
       onPress={this.touch}>
       <View>
         <Text>' this is sence B,click to sence A'</Text>
       </View>  
      </TouchableNativeFeedback> 
      </View>);
 },
});
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFC00',
  },
});
module.exports = SenceB;

5 introduce scene in Index.android.js, perfect routemapper logic.

Introduction Scenario:

Introducing the scene file
var sencea = require ('./sencea ');
var senceb = require ('./senceb ');

Perfect Routemapper:

Navigator Jump Rule
var routemapper = function (route,navigation,oncomponent) {
   _navigator = navigation;
    if (Route.name = = ' A ') {
      console.log ("return Sencea");
      Return (
       <sencea navigator={navigation}/>
      );
    } else if (route.name=== "B") {
      Console.log (" return Senceb ");
      Return (
        <senceb navigator={navigation}/>
      );
    } 
;

Weapons Preparation

If React-navtive is another battleground for mobile application development, then we know where the battlefield is, and then how to drill the weapon. To be familiar with react-native programming, we must first master the following weapons:

1 JS Basics

2 Node.js

3 JSX Grammar

4 Flexbox Layout

Note: React-native comes out soon the document material is not many, the article is deficient the place welcome to correct, the research new technology, the New Thought.