React native further study (Navigatorios study)

Special statement: I code is not used for any commercial purposes, but some of the personal learning experience, in order to make later more programmers less go some detours. * (If infringement of your copyright will be forgiven) *.

Development tools: Webstorm,xcode

1. The creation of Rn is generally created with this, because the latest is the wall:

React-native Init MyApp--version 0.44.3

2. example code for the class that is cited in the library:

Import {Navigation} from ' react-native ';

3. introduce your own new class

var List = require ('./list ');

4. Navigatorios must specify a path when using it or it will error.

5. If the first startup page is not the default load, you typically create a class using the following method:

var List = React.createclass ({

Render () {

Return

<view style={styles.container}>

</View>

);

},

});

Here are some of the previous knowledge points I wrote code:

Import React, {Component} from ' React ';

Import {

Appregistry,

StyleSheet,

Text,

View

} from ' react-native ';

Import {Navigatorios} from ' react-native ';

var List = require ('./list ');

Export default class Navbartest extends Component {

Render () {

Return (

<navigatorios

Style={styles.container}

initialroute={{

Component:list,

Title: ' Cruise ship ',

passprops:{},

}}

/>

);

}

}

Const STYLES = Stylesheet.create ({

Container: {

Flex:1,

},

});

Appregistry.registercomponent (' Navbartest ', () = Navbartest);

The above is to create a navigatorios, then the default list is the main page. When jumping to another detail interface, you only need to define an action, and then add the function to implement it. Here is the instance code:

Import React, {Component} from ' React ';
Import {
Appregistry,
StyleSheet,
Text,
View,
ScrollView,
} from ' react-native ';

var Detail = require ('./detail ');
var List = React.createclass ({
Render () {
Return
<scrollview style={styles.container}>
<text Style={styles.list_item} onpress={this.goto}> * Luxury Dragon Week home swish swish swish swish </Text>
<text Style={styles.list_item} onpress={this.goto}> * Luxury Dragon Week home swish swish swish swish </Text>
<text Style={styles.list_item} onpress={this.goto}> * Luxury Dragon Week home swish swish swish swish </Text>
</ScrollView>
);
},

Goto:function () {
This.props.navigator.push ({
Component:detail,
Title: ' Cruise ship details ',
Rightbuttontitle: ' Shopping cart ',
Onrightbuttonpress:function () {
Alert (' Enter cart ');
}
});
}
});

Const STYLES = Stylesheet.create ({
Container: {
Flex:1,
BackgroundColor: ' #F5FCFF ',
},
List_item: {
Height:30,
Color: ' #FF0067 ',
Fontsize:16,
FontWeight: ' Bold ',
}
});

Module.exports = List;

In particular, when creating a new class, the way to output this class is the last line of code. and (module.exports = List;)

The above is a simple jump, the use of space Navigatorios implementation, when I use this thing when the doubts summed up the following several points:
1. How to introduce Navigatorios this space, which has code, and (Import {Navigatorios} from ' react-native ';)
2. How do I set the root controller for a jump? The list above.
3. How to implement the Jump method, onpress implementation method.

React native further study (Navigatorios study)