Commit d99465e

mo khan <mo@mokhan.ca>
2016-11-25 03:53:50
add some navigating back and forth.
1 parent 43e44e6
Changed files (3)
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();
+  }
 }