@@ -17,17 +17,19 @@ Usage
1717-----
1818
1919``` javascript
20- var Router = require ( ' react-native-simple-router' ) ;
20+ import Router , { Component } from ' react-native-simple-router' ;
2121```
2222
2323The basics:
2424``` javascript
2525// The initial page
26- var HelloPage = React .createClass ({
27- render : function () {
26+ class HelloPage extends Component {
27+
28+ render () {
2829 return < Text > Hello world! < / Text > ;
2930 }
30- });
31+
32+ };
3133
3234// Your route object should contain at least:
3335// - The name of the route (which will become the navigation bar title)
@@ -38,13 +40,15 @@ var firstRoute = {
3840};
3941
4042// The Router wrapper
41- var MyApp = React .createClass ({
43+ class MyApp extends Component {
44+
4245 render () {
4346 return (
4447 < Router firstRoute= {firstRoute} / >
45- )
48+ );
4649 }
47- });
50+
51+ };
4852
4953AppRegistry .registerComponent (' routerTest' , () => MyApp);
5054```
@@ -54,16 +58,16 @@ Boom. That's it.
5458From the "Hello world!"-page you can then navigate further to a new component by calling ``` this.props.toRoute() ``` . Let's build upon the HelloPage component in our first example:
5559
5660``` javascript
57- var HelloPage = React . createClass ( {
61+ class HelloPage extends Component {
5862
59- nextPage : function () {
63+ nextPage () {
6064 this .props .toRoute ({
6165 name: " A new screen" ,
6266 component: HelloPage
6367 });
64- },
68+ }
6569
66- render : function () {
70+ render () {
6771 return (
6872 < View>
6973 < TouchableHighlight onPress= {this .nextPage } underlayColor= " transparent" >
@@ -72,6 +76,7 @@ var HelloPage = React.createClass({
7276 < / View>
7377 );
7478 }
79+
7580});
7681```
7782
@@ -132,8 +137,8 @@ Events emitted by the router:
132137
133138``` javascript
134139 this .props .routeEmitter .addListener (' didFocus' , (name ) => {
135- // Check if name is the current component, and if it is, act on this focus event.
136- });
140+ // Check if name is the current component, and if it is, act on this focus event.
141+ });
137142```
138143
139144
@@ -146,7 +151,7 @@ To see more of the router in action, you can check out the Twitter example app t
146151After that, don't forget to rebuild the app in XCode before you launch the simulator. Then test the app by requiring the TwitterApp component:
147152
148153``` javascript
149- var TwitterApp = require ( ' ./node_modules/react-native-simple-router/twitter-example' ) ;
154+ import TwitterApp from ' ./node_modules/react-native-simple-router/twitter-example' ;
150155
151156var {
152157 AppRegistry
0 commit comments