保堂静态

@@ -4,7 +4,10 @@ import {
   AppRegistry,
   StyleSheet,
   Text,
-  View
+  View,
+  ScrollView,
+  TouchableOpacity,
+  Image
 } from 'react-native';
 
 
@@ -13,25 +16,90 @@ export default class InsuranceChurch extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>
-          保堂
-        </Text>
+        <NewsList />
       </View>
     );
   }
 }
 
+class NewsList extends Component {
+  render() {
+    return (
+      <ScrollView style={styles.scrollViewContainer} automaticallyAdjustContentInsets={false}>
+        <ListItem title={"平安保险2017版平安保险平安保险平安保险"} context={"刚刚"} />
+        <ListItem title={"平安保险2017版"} context={"刚刚"} />
+        <ListItem title={"平安保险2017版平安保险平安保险平安保平安保险2017版平安保险平安保险平安保险平安保险平安保险平安保险2017版平安保险平安保险平安保险平安保险平安保险险平安保险平安保险"} context={"刚刚"} />
+        <ListItem title={"平安保险2017版"} context={"刚刚"} />
+        <Text style={styles.scrollViewText}>没有更多了</Text>
+      </ScrollView>
+    );
+  }
+}
+
+class ListItem extends Component {
+  render() {
+    return (
+      <TouchableOpacity style={styles.itemContainer}>
+        <View style={styles.itemImgWrapper}></View>
+        <View style={styles.itemRightWrapper}>
+          <Text style={styles.itemTextTop} numberOfLines={2}>{this.props.title}</Text>
+          <Text style={styles.itemTextBottom}>{this.props.context}</Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
+    justifyContent: "flex-start",
+    alignItems: "stretch",
+    backgroundColor: "#EFEFEF",
+    paddingTop: 74
+  },
+  scrollViewContainer: {
+    height: 300,
+    // backgroundColor: "red"
+  },
+  scrollViewText: {
+    color: "#7A7A7A",
+    fontSize: 13,
+    marginTop: 10,
+    textAlign: "center"
+  },
+  itemContainer: {
+    height: 102,
+    backgroundColor: "#fff",
+    flexDirection: 'row',
+    alignItems: "center",
+    borderTopWidth: 1,
+    borderTopColor: "#EEEEEE",
+    borderStyle: "solid",
+    paddingLeft: 13,
+    paddingRight: 13,
+  },
+  itemImgWrapper: {
+    width:88,
+    height:78,
+    backgroundColor: "#ccc",
+    marginRight: 12
+  },
+  itemRightWrapper: {
+    justifyContent: "center",
+    height: 66,
+    flex: 1
+    // marginRight: 13
+  },
+  itemTextTop: {
+    fontSize: 16,
+    color: "#202020",
+    lineHeight: 21
+  },
+  itemTextBottom: {
+    fontSize: 13,
+    color: "#7A7A7A",
+    lineHeight: 18
   },
 });