Split screen in a different file

cedced19 · May 26, 2017 · f994a07 · f994a07
1 parent adff70f
commit f994a07
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 42 deletions.
diff --git a/app/screens/main.js b/app/screens/main.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  StatusBar,
+  Text,
+  View
+} from 'react-native';
+
+
+export default class MainScreen extends Component {
+  static navigationOptions = {
+    title: 'Découvrir Phalsbourg',
+    color: '#ff0000'
+  };
+  render() {
+    const { navigate } = this.props.navigation;
+    return (
+      <View style={styles.container}>
+        <StatusBar
+          backgroundColor={'royalblue'}
+        />
+        <Text style={styles.welcome}>
+          Bienvenue sur l'application {'\n'} "Découvrir Phalsbourg"
+        </Text>
+        <Text style={styles.instructions}>
+          Phalsbourg est actuellement peuplé d'environ 5000 habitants.
+        </Text>
+        <Text style={styles.instructions}>
+          Découvrez, grâce à l'application, l'histoire de Phalsbourg simplement en vous ballandant dans les rues à la recherche du passé...
+        </Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+  instructions: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  }
+});
diff --git a/index.js b/index.js
@@ -3,51 +3,20 @@
  * https://github.com/facebook/react-native
  * @flow
  */
-
 import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
+import { AppRegistry } from 'react-native';
+import { StackNavigator } from 'react-navigation';
+import MainScreen from './app/screens/main.js';
 
-export default class DecouvrirPhalsbourg extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
-    );
+const DecouvrirPhalsbourg = StackNavigator({
+  Main: {screen: MainScreen}
+}, {
+  navigationOptions: {
+   headerStyle:  {
+     backgroundColor: 'dodgerblue'
+   },
+   headerTintColor: 'white'
   }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
 });
 
 AppRegistry.registerComponent('DecouvrirPhalsbourg', () => DecouvrirPhalsbourg);