add banner

FuYaoDe · Jan 4, 2017 · 4128b41 · 4128b41
1 parent 2e11720
commit 4128b41
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react": "~15.4.1",
     "react-native": "0.38.0",
     "react-native-router-flux": "^3.37.0",
+    "react-native-swiper": "^1.5.4",
     "react-redux": "^4.4.0",
     "redux": "^3.3.1",
     "redux-thunk": "^2.0.1"

diff --git a/src/components/Banner.js b/src/components/Banner.js
@@ -0,0 +1,89 @@
+import React, { PropTypes } from 'react';
+import {
+  Text,
+  Image,
+  StyleSheet,
+} from 'react-native';
+import Swiper from 'react-native-swiper'
+
+const defaultProps = {
+  data: [{
+    img: { uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/6T4KJZ8W9M.jpg' },
+    text: 'Hello Swiper',
+    textPosition: 'bottomLeft',
+    textColor: '#fff',
+  }, {
+    img: { uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/OERP9XI9YB.jpg' },
+    text: 'Hello Swiper',
+  }, {
+    img: { uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/1U68PK9DJ0.jpg' },
+    text: 'Hello Swiper',
+    textPosition: 'topRight',
+    textColor: '#fff',
+  }],
+};
+
+const propTypes = {
+  data: PropTypes.array
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 200,
+  },
+  slide: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#fff',
+    fontSize: 25,
+    fontWeight: 'bold'
+  },
+  topLeft: {
+    padding: 30,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  topRight: {
+    padding: 30,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end',
+  },
+  bottomLeft: {
+    padding: 30,
+    justifyContent: 'flex-end',
+    alignItems: 'flex-start',
+  },
+  bottomRight: {
+    padding: 30,
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+  },
+});
+
+const Banner = (props) => {
+  return (
+    <Swiper style={styles.wrapper} height={250} horizontal autoplay>
+      <Image style={[styles.slide, styles.bottomLeft]} source={{ uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/6T4KJZ8W9M.jpg' }}>
+        <Text style={[styles.text]}>Hello Swiper</Text>
+      </Image>
+      <Image style={styles.slide} source={{ uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/OERP9XI9YB.jpg' }}>
+        <Text style={styles.text}>And simple</Text>
+      </Image>
+      <Image style={[styles.slide, styles.topRight]} source={{ uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/1U68PK9DJ0.jpg' }}>
+        <Text style={styles.text}>Beautiful</Text>
+      </Image>
+    </Swiper>
+  );
+};
+
+
+Banner.propTypes = propTypes;
+Banner.defaultProps = defaultProps;
+
+export default Banner;
diff --git a/src/containers/Home.bak.js b/src/containers/Home.bak.js
@@ -0,0 +1,53 @@
+import React, { Component, PropTypes } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity
+} from 'react-native';
+
+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,
+  },
+});
+
+export default class Home extends Component {
+  static propTypes = {
+    navigate: PropTypes.func.isRequired
+  };
+
+  toCounter = () => {
+    const { navigate } = this.props;
+    navigate({
+      type: 'push',
+      key: 'counter'
+    });
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>
+          Welcome to React Native Boilerplate!
+        </Text>
+        <TouchableOpacity onPress={this.toCounter}>
+          <Text style={styles.instructions}>Navigate to Counter</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
diff --git a/src/containers/Home.js b/src/containers/Home.js
@@ -3,50 +3,23 @@ import {
   StyleSheet,
   Text,
   View,
-  TouchableOpacity
 } from 'react-native';
+import Banner from '../components/Banner'
 
 const styles = StyleSheet.create({
   container: {
+    paddingTop: 64,
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
   },
 });
 
-export default class Home extends Component {
-  static propTypes = {
-    navigate: PropTypes.func.isRequired
-  };
-
-  toCounter = () => {
-    const { navigate } = this.props;
-    navigate({
-      type: 'push',
-      key: 'counter'
-    });
-  }
+export default class Login extends Component {
+  static propTypes = {};
 
   render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native Boilerplate!
-        </Text>
-        <TouchableOpacity onPress={this.toCounter}>
-          <Text style={styles.instructions}>Navigate to Counter</Text>
-        </TouchableOpacity>
+        <Banner />
       </View>
     );
   }

diff --git a/src/containers/Router.js b/src/containers/Router.js
@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { Router, Scene } from 'react-native-router-flux';
 import { connect } from 'react-redux';
 import Login from './Login';
-import Counter from './Counter';
+import Home from './Home';
 
 const RouterWithRedux = connect()(Router);
 
@@ -12,6 +12,7 @@ export default class AppRoute extends React.Component {
       <RouterWithRedux>
         <Scene key="root">
           <Scene key="login" hideNavBar component={Login} title="登入" initial />
+          <Scene key="home" component={Home} title="Home" initial />
         </Scene>
       </RouterWithRedux>
     );