新增 ListView

FuYaoDe · Jan 6, 2017 · 2cee6d6 · 2cee6d6
1 parent 30d464d
commit 2cee6d6
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 18 deletions.
diff --git a/src/components/Card.js b/src/components/Card.js
@@ -3,6 +3,7 @@ import {
   Text,
   Image,
   StyleSheet,
+  TouchableOpacity,
   View
 } from 'react-native';
 
@@ -11,14 +12,16 @@ const defaultProps = {
   subTitle: '',
   image: '',
   imagePosition: 'left',
-  backgroundColor: 'rgb(238, 219, 214)'
+  backgroundColor: 'rgb(238, 219, 214)',
+  onPress: () => {},
 };
 
 const propTypes = {
   title: PropTypes.string,
   image: PropTypes.object,
   subTitle: PropTypes.string,
   imagePosition: PropTypes.string,
+  onPress: PropTypes.func,
 };
 
 const styles = StyleSheet.create({
@@ -55,13 +58,16 @@ const styles = StyleSheet.create({
 const Card = (props) => {
   let flexDirection = props.imagePosition === 'left' ? 'row' : 'row-reverse';
   return(
-    <View style={[styles.container, { flexDirection }]}>
+    <TouchableOpacity
+      style={[styles.container, { flexDirection }]}
+      onPress={props.onPress}
+    >
       <Image source={props.image} style={styles.img} />
       <View style={[styles.desc, { backgroundColor: props.backgroundColor }]}>
         <Text style={styles.title}>{props.title}</Text>
         <Text style={styles.subTitle}>{props.subTitle}</Text>
       </View>
-    </View>
+    </TouchableOpacity>
   );
 }
 

diff --git a/src/containers/Detail.js b/src/containers/Detail.js
@@ -0,0 +1,25 @@
+import React, { Component, PropTypes } from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+import Card from '../components/Card'
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: 64,
+    flex: 1,
+  },
+});
+
+export default class Detail extends Component {
+  static propTypes = {};
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Card {...this.props} />
+      </View>
+    );
+  }
+}
diff --git a/src/containers/Home.js b/src/containers/Home.js
@@ -3,10 +3,11 @@ import {
   StyleSheet,
   Text,
   View,
+  ListView,
 } from 'react-native';
 import Banner from '../components/Banner'
 import Card from '../components/Card'
-
+import { Actions } from 'react-native-router-flux';
 const styles = StyleSheet.create({
   container: {
     paddingTop: 64,
@@ -27,23 +28,51 @@ const ad = [{
   textPosition: 'topLeft',
 }];
 
-export default class Login extends Component {
+const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
+const dataSource = ds.cloneWithRows([{
+  title: 'Beautiful wave',
+  subTitle: 'Curated looks for creatives, pioneers, and individuals!',
+  image: { uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/AOOC3CJARN.jpg' },
+  backgroundColor: '#fff',
+}, {
+  title: 'Beautiful wave',
+  subTitle: 'Curated looks for creatives, pioneers, and individuals!',
+  image: { uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/B23METEB9K.jpg' },
+  imagePosition: 'right',
+}, {
+  title: 'Beautiful wave',
+  subTitle: 'Curated looks for creatives, pioneers, and individuals!',
+  image: { uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/AOOC3CJARN.jpg' },
+  backgroundColor: '#fff',
+}, {
+  title: 'Beautiful wave',
+  subTitle: 'Curated looks for creatives, pioneers, and individuals!',
+  image: { uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/B23METEB9K.jpg' },
+}, {
+  title: 'Beautiful wave',
+  subTitle: 'Curated looks for creatives, pioneers, and individuals!',
+  image: { uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/AOOC3CJARN.jpg' },
+  backgroundColor: '#fff',
+}, {
+  title: 'Beautiful wave',
+  subTitle: 'Curated looks for creatives, pioneers, and individuals!',
+  image: { uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/B23METEB9K.jpg' },
+}]);
+
+export default class Home extends Component {
   static propTypes = {};
+
   render() {
     return (
       <View style={styles.container}>
         <Banner data={ad} />
-        <Card
-          title={'Beautiful wave'}
-          image={{ uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/AOOC3CJARN.jpg' }}
-          subTitle={'Curated looks for creatives, pioneers, and individuals!'}
-          backgroundColor={'#fff'}
-        />
-        <Card
-          title={'Beautiful wave'}
-          image={{ uri: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/B23METEB9K.jpg' }}
-          subTitle={'Curated looks for creatives, pioneers, and individuals!'}
-          imagePosition={'right'}
+        <ListView
+          dataSource={dataSource}
+          renderRow={(rowData, sectionID, rowID) => <Card
+            {...rowData}
+            imagePosition={rowID % 2 === 1 ? 'right' : 'left'}
+            onPress={() => Actions.cardDetail({ ...rowData })}
+          />}
         />
       </View>
     );

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