Commit d99465e
Changed files (3)
app
components
app/components/application-shell.js
@@ -1,11 +1,19 @@
import React, { Component } from 'react';
-import { AppRegistry, Text, ListView, View, Image, TextInput } from 'react-native';
-import Movies from './movies'
+import { AppRegistry, Text, ListView, View, Image, TextInput, Navigator } from 'react-native';
+import MyScene from './my-scene'
export default class ApplicationShell extends Component {
render() {
return (
- <Movies />
+ <Navigator
+ initialRoute={{component: MyScene, params: {title: 'Hello'}}}
+ renderScene={this.routeTo}
+ configureScene={(route) => Navigator.SceneConfigs.FloatFromRight}
+ />
);
}
+ routeTo(route, navigator) {
+ let Component = route.component;
+ return (<Component navigator={navigator} {...route.params} />)
+ }
}
app/components/movies.js
@@ -1,7 +1,5 @@
import React, { Component } from 'react';
-import { AppRegistry, Text, ListView, View, Image, TextInput } from 'react-native';
-import ViewContainer from './ViewContainer'
-import StatusBarBackground from './StatusBarBackground'
+import { AppRegistry, Text, ListView, View, Image, TextInput, TouchableHighlight } from 'react-native';
import Api from '../services/api'
import Movie from './movie'
@@ -22,9 +20,9 @@ export default class Movies extends Component {
new Api(url).get((json) => {
that.setState({ dataSource: that.mapAll(json.movies) });
});
- setInterval(() => {
- that.setState({ showText: !that.state.showText });
- }, 1000);
+ //setInterval(() => {
+ //that.setState({ showText: !that.state.showText });
+ //}, 1000);
}
render() {
@@ -35,6 +33,9 @@ export default class Movies extends Component {
<View style={{flex: 1, alignItems: 'center'}}>
<Image source={pic} style={{width: 193, height: 110}} />
<Text>{display}</Text>
+ <TouchableHighlight onPress={this.onBack.bind(this)}>
+ <Text>Back</Text>
+ </TouchableHighlight>
<ListView
dataSource={this.state.dataSource}
renderRow={(row) => <Movie name={row} />}
@@ -47,4 +48,8 @@ export default class Movies extends Component {
movies.forEach((item) => console.log(item))
return this.ds.cloneWithRows(movies.map((item) => item.title));
}
+
+ onBack() {
+ this.props.navigator.pop();
+ }
}
app/components/my-scene.js
@@ -1,5 +1,6 @@
import React, { Component } from 'react';
-import { View, Text, Navigator } from 'react-native';
+import { View, Text, TouchableHighlight } from 'react-native';
+import Movies from './movies'
export default class MyScene extends Component {
static get defaultProps() {
@@ -10,7 +11,21 @@ export default class MyScene extends Component {
return (
<View>
<Text>Hi! My name is {this.props.title}.</Text>
+ <TouchableHighlight onPress={this.onForward.bind(this)}>
+ <Text>Next</Text>
+ </TouchableHighlight>
+ <TouchableHighlight onPress={this.onBack.bind(this)}>
+ <Text>Back</Text>
+ </TouchableHighlight>
</View>
)
}
+
+ onForward() {
+ this.props.navigator.push({component: Movies, params: {}});
+ }
+
+ onBack() {
+ this.props.navigator.pop();
+ }
}