add login page

package.json

@@ -23,6 +23,7 @@
     "lodash": "^4.3.0",
     "react": "~15.4.1",
     "react-native": "0.38.0",
+    "react-native-router-flux": "^3.37.0",
     "react-redux": "^4.4.0",
     "redux": "^3.3.1",
     "redux-thunk": "^2.0.1"

src/containers/Login.js

@@ -0,0 +1,74 @@
+import React, { Component, PropTypes } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bottmContainer: {
+    height: 60,
+    flexDirection: 'row',
+  },
+  background: {
+    height: 800,
+    width: 600,
+    position: 'absolute',
+  },
+  button: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: 20,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  title: {
+    fontSize: 30,
+    color: '#fff',
+    fontWeight: 'bold',
+    backgroundColor: 'rgba(0,0,0,0)'
+  },
+  desc: {
+    fontSize: 20,
+    color: '#fff',
+    backgroundColor: 'rgba(0,0,0,0)',
+    textAlign: 'center'
+  }
+});
+
+export default class Login extends Component {
+  static propTypes = {};
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Image style={styles.background} source={{ uri: 'https://unsplash.it/800/600?image=102&blur' }} />
+        <View style={styles.container}>
+          <Text style={[styles.title, { fontSize: 40}]}>Logo</Text>
+        </View>
+        <View style={styles.container}>
+          <Text style={styles.title}>Your Music</Text>
+          <Text style={styles.desc}>Save any song, album or artist to yout own music collection.</Text>
+        </View>
+        <View style={styles.bottmContainer}>
+          <TouchableOpacity style={[styles.button, { backgroundColor: '#53423D'}]}>
+            <Text style={styles.buttonText}>LOG IN</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={[styles.button, { backgroundColor: '#A58987' }]}>
+            <Text style={styles.buttonText}>SIGN UP</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+}

src/containers/Router.js

@@ -1,44 +1,19 @@
 import React, { Component, PropTypes } from 'react';
-import { NavigationExperimental } from 'react-native';
+import { Router, Scene } from 'react-native-router-flux';
 import { connect } from 'react-redux';
-
-import Home from './Home';
+import Login from './Login';
 import Counter from './Counter';
 
-const { CardStack } = NavigationExperimental;
-
-@connect(
-  state => state,
-  dispatch => ({ dispatch })
-)
-export default class Router extends Component {
-  static propTypes = {
-    routes: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired
-  };
-
-  handleNavigation = action => {
-    this.props.dispatch(action);
-  }
-
-  renderScene = props => {
-    switch (props.scene.key) {
-      case 'scene_home':
-        return <Home navigate={this.handleNavigation} />;
-      case 'scene_counter':
-        return <Counter navigate={this.handleNavigation} />;
-      default:
-        return null;
-    }
-  }
+const RouterWithRedux = connect()(Router);
 
+export default class AppRoute extends React.Component {
   render() {
     return (
-      <CardStack
-        direction="horizontal"
-        navigationState={this.props.routes}
-        renderScene={this.renderScene}
-      />
+      <RouterWithRedux>
+        <Scene key="root">
+          <Scene key="login" hideNavBar component={Login} title="登入" initial />
+        </Scene>
+      </RouterWithRedux>
     );
   }
 }