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:
parent
ad0c8e63fc
commit
ea5b335351
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue