保圈静态OK

@@ -26,10 +26,10 @@ 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={"刚刚"} />
+        <ListItem title={"平安保险2017版平安保险平安保险平安保险"} content={"刚刚"} />
+        <ListItem title={"平安保险2017版"} content={"刚刚"} />
+        <ListItem title={"平安保险2017版平安保险平安保险平安保平安保险2017版平安保险平安保险平安保险平安保险平安保险平安保险2017版平安保险平安保险平安保险平安保险平安保险险平安保险平安保险"} content={"刚刚"} />
+        <ListItem title={"平安保险2017版"} content={"刚刚"} />
         <Text style={styles.scrollViewText}>没有更多了</Text>
       </ScrollView>
     );
@@ -43,7 +43,7 @@ class ListItem extends Component {
         <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>
+          <Text style={styles.itemTextBottom}>{this.props.content}</Text>
         </View>
       </TouchableOpacity>
     )

@@ -4,34 +4,126 @@ import {
   AppRegistry,
   StyleSheet,
   Text,
-  View
+  View,
+  ScrollView,
+  TouchableOpacity,
+  Image
 } from 'react-native';
 
-
-
 export default class InsuranceCircle 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={"家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…"}
+          content={"现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…"}
+          name={"汉克斯"}
+          num={"30"}
+        />
+        <ListItem 
+          title={"家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…"}
+          content={"现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…"}
+          name={"汉克斯"}
+          num={"30"}
+        />
+        <Text style={styles.scrollViewText}>没有更多了</Text>
+      </ScrollView>
+    )
+  }
+}
+
+class ListItem extends Component {
+  render() {
+    return (
+      <TouchableOpacity style={styles.itemContainer}>
+        <Text style={styles.itemTitle} numberOfLines={2}>{this.props.title}</Text>
+        <Text style={styles.itemContent} numberOfLines={3}>{this.props.content}</Text>
+        <View style={styles.itemInfoWrapper}>
+          <View style={styles.itemInfoLeft}>
+            {/* <Image style={styles.itemInfoIcon} /> */}
+            <View style={styles.itemInfoIcon}></View>
+            <Text style={styles.itemInfoName}>{this.props.name}</Text>
+          </View>
+          <Text style={styles.itemInfoRight}>{this.props.num} 评论</Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
+    justifyContent: "flex-start",
+    alignItems: "stretch",
+    backgroundColor: "#EFEFEF",
+    paddingTop: 74,
+  },
+  scrollViewContainer: {
+    height: 300,
+  },
+  scrollViewText: {
+    color: "#7A7A7A",
+    fontSize: 13,
+    marginTop: 10,
+    textAlign: "center"
+  },
+  itemContainer: {
+    backgroundColor: "#fff",
+    marginBottom: 10,
+    height: 180,
+    paddingLeft: 13,
+    paddingRight: 13,
+    paddingTop: 19,
+  },
+  itemTitle: {
+    fontSize: 17,
+    color: "#242424",
+    lineHeight: 24
+  },
+  itemContent: {
+    marginTop: 5,
+    fontSize: 14,
+    color: "#7A7A7A",
+    lineHeight: 20
+  },
+  itemInfoWrapper: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: 11
+  },
+  itemInfoLeft: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+  itemInfoIcon: {
+    width: 26,
+    height: 26,
+    backgroundColor: "#ccc",
+    marginRight: 10,
+    borderRadius: 26,
+  },
+  itemInfoName: {
+    fontSize: 13,
+    color: "#242424",
+    lineHeight: 18,
   },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
+  itemInfoRight: {
+    fontSize: 13,
+    color: "#999999",
+    lineHeight: 18,
   },
-});
+})