AIQues

@@ -8,7 +8,7 @@ import {
   TouchableOpacity,
   ScrollView,
   ListView,
-  Dimensions,
+  Dimensions
 } from "react-native";
 import { StackNavigator, TabNavigator } from "react-navigation";
 
@@ -19,15 +19,26 @@ export default class Home extends Component {
       QuesList: [
         {
           title: "1.我该称呼您先生还是女士呢？",
-          answers: ["先生","女士"],
-        },{
+          type: "select",
+          answers: ["先生", "女士"]
+        },
+        {
           title: "2.请问您是否有家庭负债？",
-          answers: ["有贷款","无贷款"],
-        },{
+          type: "select",
+          answers: ["有贷款", "无贷款"]
+        },
+        {
           title: "3.您要为哪些家人投保呢？",
-          answers: ["先生","配偶","儿子","女儿","母亲","父亲"]
+          type: "select",
+          answers: ["先生", "配偶", "儿子", "女儿", "母亲", "父亲"]
+        },
+        {
+          title: "4.选择出生日期",
+          type: "date",
+          answers: "1994.06.06"
         }
-      ]
+      ],
+      answerList: []
     };
   }
   componentWillMount() {}
@@ -63,24 +74,36 @@ export default class Home extends Component {
   }
 
   _renderQuestion() {
-    const { QuesList } = this.state;
+    return this.state.QuesList.map((item, index) => {
       return (
-      <Text>列表</Text>
-    )
-  }
-
-  render() {
-    // console.log("首页的this.props", this);
-    // console.log("render首页文章列表", this.state.ListData);
-    const { navigate } = this.props.navigation;
+        <View style={styles.itemQuesContainer} key={index}>
+          <View style={styles.titleContaier}>
+            <Text style={styles.title}>{item.title}</Text>
+          </View>
+          <View style={styles.answerContainer}>
+            {item.type == "select" ? (
+              item.answers.map((x, index2) => {
                 return (
-      <View style={styles.container}>
-        <Text>智能问题</Text>
-        {this._renderQuestion()}
+                  <TouchableOpacity key={index2} style={styles.answerWrapper}>
+                    <Text style={styles.answer}>{x}</Text>
+                  </TouchableOpacity>
+                );
+              })
+            ) : (
+              <TouchableOpacity>
+                <Text>{item.answers}</Text>
+              </TouchableOpacity>
+            )}
+          </View>
         </View>
       );
+    });
   }
 
+  render() {
+    const { navigate } = this.props.navigation;
+    return <View style={styles.container}>{this._renderQuestion()}</View>;
+  }
 }
 
 const styles = StyleSheet.create({
@@ -88,6 +111,41 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "flex-start",
     alignItems: "stretch",
-    backgroundColor: "#F0F0F0"
+    backgroundColor: "#F0F0F0",
+    paddingHorizontal: 12,
+    paddingTop: 12
   },
+  itemQuesContainer: {
+    backgroundColor: "white",
+    marginBottom: 12,
+    borderRadius: 4
+  },
+  titleContaier: {
+    paddingHorizontal: 14,
+    paddingVertical: 17
+  },
+  answerContainer: {
+    borderStyle: "solid",
+    borderColor: "#E6E6E6",
+    borderTopWidth: 0.5,
+    paddingHorizontal: 14,
+    paddingBottom: 17,
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  answerWrapper: {
+    marginRight: 18,
+    marginTop: 17,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderStyle: "solid",
+    borderColor: "#ccc",
+    borderWidth: 0.5,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 3
+  },
+  answer: {
+    fontSize: 15,
+  }
 });