详情页静态

-
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   AppRegistry,
   StyleSheet,
@@ -7,19 +6,74 @@ import {
   View,
   ScrollView,
   TouchableOpacity,
-  Image,
-} from 'react-native';
+  Image
+} from "react-native";
 
 export default class Details extends Component {
   constructor(props) {
     super(props);
-    this.state = {}
+    this.state = {
+      data: this.props.data
+    };
+  }
+  componentWillMount() {
+    console.log("详情页", this);
   }
 
   render() {
+    const { data } = this.state;
     return (
       <View style={styles.container}>
-        <Text>我是详情页</Text>
+        <ScrollView automaticallyAdjustContentInsets={false}>
+          <Text style={styles.titleText} numberOfLines={3}>
+            {data.title}
+          </Text>
+          {/* 个人信息 */}
+          <View style={styles.personContainer}>
+            <Image style={styles.personImg} source={data.image} />
+            <View style={styles.personRightContainer}>
+              <View style={styles.personRTContainer}>
+                <Text style={styles.personRTName}>{data.name}</Text>
+                <Text style={styles.personRTIdentity}>{data.identity}</Text>
+              </View>
+              <Text style={styles.personRB}>{data.time}</Text>
+            </View>
+          </View>
+          {/* 正文 */}
+          <Text style={styles.content}>{data.content}</Text>
+          <Text style={styles.copyright}>本文版权归 {data.name} 所有</Text>
+          {/* 评论 */}
+          <View style={styles.commentsContainer}>
+            <View style={styles.commentsHeader}>
+              <Text style={styles.commentsHeaderL}>评论</Text>
+              <Text style={styles.commentsHeaderR}>
+                ( {data.comments.length} )
+              </Text>
+            </View>
+            {data.comments.map((item, index) => {
+              return (
+                <View style={styles.itemContainer} key={index}>
+                  <Image style={styles.itemIcon} source={item.replayicon} />
+                  <View style={styles.itemRightContainer}>
+                    <View style={styles.itemRightTop}>
+                      <View style={styles.itemRightTopLeft}>
+                        <Text style={styles.itemReplyer}>{item.replyer}</Text>
+                        <Text style={styles.itemWord}>回复</Text>
+                        <Text style={styles.itemBeenreplyer}>{item.beenreplyer}</Text>
+                        <Text style={styles.itemTime}>{item.time}</Text>
+                      </View>
+                      <Image
+                        style={styles.itemRightTopRight}
+                        source={require("../../assets/tabbar/ic_circle_n.png")}
+                      />
+                    </View>
+                    <Text style={styles.itemRightBottom}>{item.content}</Text>
+                  </View>
+                </View>
+              );
+            })}
+          </View>
+        </ScrollView>
       </View>
     );
   }
@@ -30,8 +84,114 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "flex-start",
     alignItems: "stretch",
-    backgroundColor: "#EFEFEF",
-    paddingTop: 74,
+    backgroundColor: "white",
+    paddingTop: 64
   },
-})
-
+  titleText: {
+    marginTop: 21,
+    marginLeft: 20,
+    marginRight: 20,
+    fontSize: 24,
+    lineHeight: 30
+  },
+  personContainer: {
+    marginTop: 16,
+    marginLeft: 20,
+    marginRight: 20,
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center"
+  },
+  personImg: {
+    width: 42,
+    height: 42
+  },
+  personRightContainer: {
+    marginLeft: 10
+  },
+  personRTContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center"
+  },
+  personRTName: {
+    fontSize: 16,
+    color: "#242424"
+  },
+  personRTIdentity: {
+    fontSize: 14,
+    color: "#3F3F3F",
+    marginLeft: 5
+  },
+  personRB: {
+    fontSize: 13,
+    color: "#999999"
+  },
+  content: {
+    marginLeft: 25,
+    marginRight: 25,
+    marginTop: 35,
+    marginBottom: 25,
+    fontSize: 15,
+    lineHeight: 22,
+    color: "#555555"
+  },
+  copyright: {
+    textAlign: "center",
+    fontSize: 12,
+    color: "#999999",
+    marginBottom: 20
+  },
+  commentsContainer: {
+    borderTopWidth: 10,
+    borderColor: "#EFEFEF",
+    borderStyle: "solid",
+    paddingLeft: 13,
+    paddingRight: 13
+  },
+  commentsHeader: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    height: 45
+  },
+  commentsHeaderL: {
+    fontSize: 15,
+    color: "#242424",
+    marginRight: 5
+  },
+  commentsHeaderR: {
+    fontSize: 15,
+    color: "#242424"
+  },
+  itemContainer: {
+    paddingTop: 16,
+    paddingBottom: 16,
+    flexDirection: "row",
+    justifyContent: "flex-start",
+  },
+  itemIcon: {
+    width: 32,
+    height: 32,
+  },
+  itemRightContainer: {
+    flex: 1,
+    marginLeft: 10
+  },
+  itemRightTop: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 7,
+  },
+  itemRightTopLeft: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+  itemRightTopRight: {},
+  itemRightBottom: {
+    fontSize: 15,
+    lineHeight: 21,
+    color: "#242424",
+  },
+});

@@ -20,18 +20,40 @@ export default class InsuranceCircle extends Component {
           title: "家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…",
           content:
             "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
-          name: "jack",
-          image: require("../../assets/circle/newspic.png"),
+          name: "嘿嘿嘿",
+          identity: "保险代理人",
+          image: require("../../assets/Mine/iconpic1.png"),
           num: "30",
-          comments: []
+          time: "2017-8-15",
+          comments: [{
+            replyer: "噢噢噢",
+            replayicon: require("../../assets/Mine/iconpic1.png"),
+            beenreplyer: "嘿嘿嘿",
+            content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
+            time: "两小时前",
+          },{
+            replyer: "哦哦哦",
+            replayicon: require("../../assets/Mine/iconpic1.png"),
+            beenreplyer: "哈哈哈",
+            content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
+            time: "两小时前",
+          },{
+            replyer: "洛洛洛",
+            replayicon: require("../../assets/Mine/iconpic1.png"),
+            beenreplyer: "额额额",
+            content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
+            time: "两小时前",
+          }],
         },
         {
           title: "家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…",
           content:
             "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
-          name: "mike",
+          name: "嘿嘿嘿",
+          identity: "保险代理人",
           image: require("../../assets/circle/newspic.png"),
           num: "29",
+          time: "2017-8-15",
           comments: []
         },
         {
@@ -39,14 +61,49 @@ export default class InsuranceCircle extends Component {
           content:
             "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
           name: "luosf",
+          identity: "保险代理人",
           image: require("../../assets/circle/newspic.png"),
           num: "10",
+          time: "2017-8-15",
           comments: []
         }
-      ]
+      ],
+      testData: [],
     };
   }
 
+  componentWillMount() {
+    var that = this;
+    return fetch(`https://mpay.brae.co/test/insurance/article`,{
+      method: "POST",
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((resp) => {
+        console.log("测试接口",resp);
+        // return false;
+        if (resp.status === 200) {
+          return resp.json();
+        } else {
+          console.error("something went wrong!");
+        }
+      })
+      .then((respJson) => {
+        if (respJson.enmsg != 'ok') {
+          console.error(err);
+          alert(respJson.cnmsg);
+        } else {
+          that.setState({
+            testData: respJson.data
+          });
+          console.log('state.testData',that.state.testData);
+        }
+      })
+      .catch((err) => console.error(err))
+  }
+
   render() {
     return (
       <View style={styles.container}>
@@ -62,7 +119,10 @@ export default class InsuranceCircle extends Component {
                 onPress={() => {
                   this.props.navigator.push({
                     component: Details,
-                    passProps: {}
+                    title: "哈哈哈",
+                    passProps: {
+                      data: {...item},
+                    },
                   });
                 }}
               >
@@ -101,7 +161,7 @@ const styles = StyleSheet.create({
     paddingTop: 74
   },
   scrollViewContainer: {
-    height: 300
+    // height: 300
   },
   scrollViewText: {
     color: "#7A7A7A",