Fixed and enhanced the Navigators example

Summary:
It took me a few timeslots of my life to figure out how to make this work. First, I tried to break into 2 files. The app export made no sense to me. But after doing that, I discover a invalid token, the return() was not supposed to be there. So I fixed the sample.
Closes https://github.com/facebook/react-native/pull/9802

Differential Revision: D3841320

Pulled By: mkonicek

fbshipit-source-id: 999227ee1c234b92d34844c2370ef654116b6a1d
This commit is contained in:
Marco Lovato 2016-09-09 04:34:10 -07:00 committed by Facebook Github Bot 6
parent ad0c8e63fc
commit ea5b335351
1 changed files with 37 additions and 28 deletions

View File

@ -100,46 +100,55 @@ navigator.push({
navigator.pop();
```
A more complete example that demonstrates the pushing and popping of routes could therefore look something like this:
A more complete example that demonstrates the pushing and popping of routes. Edit your index*.js file to look something like this:
```javascript
import React, { Component, PropTypes } from 'react';
import { Navigator, Text, TouchableHighlight, View } from 'react-native';
import React, { Component } from 'react';
import { AppRegistry, Navigator, Text, View } from 'react-native';
export default class SimpleNavigationApp extends Component {
import MyScene from './MyScene';
class SimpleNavigationApp extends Component {
render() {
return (
<Navigator
initialRoute={{ title: 'My Initial Scene', index: 0 }}
renderScene={(route, navigator) => {
return (
<MyScene
title={route.title}
// Function to call when a new scene should be displayed
onForward={ () => {
const nextIndex = route.index + 1;
navigator.push({
title: 'Scene ' + nextIndex,
index: nextIndex,
});
}}
// Function to call to go back to the previous scene
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
)
}}
renderScene={(route, navigator) =>
<MyScene
title={route.title}
// Function to call when a new scene should be displayed
onForward={ () => {
const nextIndex = route.index + 1;
navigator.push({
title: 'Scene ' + nextIndex,
index: nextIndex,
});
}}
// Function to call to go back to the previous scene
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
)
}
}
class MyScene extends Component {
AppRegistry.registerComponent('SimpleNavigationApp', () => SimpleNavigationApp);
```
And your MyScene.js to match this:
```javascript
import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';
export default class MyScene extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
onForward: PropTypes.func.isRequired,