点击改变样式

@@ -20,22 +20,38 @@ export default class Home extends Component {
         {
           title: "1.我该称呼您先生还是女士呢？",
           type: "select",
-          answers: ["先生", "女士"]
+          answers: ["先生", "女士"],
+          selected: 0
         },
         {
           title: "2.请问您是否有家庭负债？",
           type: "select",
-          answers: ["有贷款", "无贷款"]
+          answers: ["有贷款", "无贷款"],
+          selected: 0
         },
         {
           title: "3.您要为哪些家人投保呢？",
           type: "select",
-          answers: ["先生", "配偶", "儿子", "女儿", "母亲", "父亲"]
+          answers: ["先生", "配偶", "儿子", "女儿", "母亲", "父亲"],
+          selected: 0
         },
         {
           title: "4.选择出生日期",
           type: "date",
-          answers: "1994.06.06"
+          answers: ["请选择"],
+          selected: 0
+        },
+        {
+          title: "5.请问被保人的年收入是多少？",
+          type: "select",
+          answers: ["2万以下", "2万~10万", "10万以上"],
+          selected: 0
+        },
+        {
+          title: "6.被保人是否有社保？",
+          type: "select",
+          answers: ["有", "无"],
+          selected: 0
         }
       ],
       answerList: []
@@ -81,7 +97,7 @@ export default class Home extends Component {
             <Text style={styles.title}>{item.title}</Text>
           </View>
           <View style={styles.answerContainer}>
-            {item.type == "select" ? (
+            {/* {item.type == "select" ? (
               item.answers.map((x, index2) => {
                 return (
                   <TouchableOpacity key={index2} style={styles.answerWrapper}>
@@ -90,10 +106,51 @@ export default class Home extends Component {
                 );
               })
             ) : (
-              <TouchableOpacity>
+              <TouchableOpacity style={styles.answerWrapper}>
                 <Text>{item.answers}</Text>
               </TouchableOpacity>
-            )}
+            )} */}
+            {item.answers.map((x, index2) => {
+              return (
+                <TouchableOpacity
+                  key={index2}
+                  style={[
+                    styles.answerWrapper,
+                    {
+                      backgroundColor:
+                        item.selected == index2 ? "#1B9341" : "white"
+                    }
+                  ]}
+                  onPress={() => {
+                    if (item.type == "select") {
+                      this.setState({
+                        QuesList: [
+                          ...this.state.QuesList.slice(0, index),
+                          {
+                            ...this.state.QuesList[index],
+                            selected: index2
+                          },
+                          ...this.state.QuesList.slice(index + 1)
+                        ]
+                      });
+                    } else {
+                      {
+                        /* 选择日期 */
+                      }
+                    }
+                  }}
+                >
+                  <Text
+                    style={[
+                      styles.answer,
+                      { color: item.selected == index2 ? "white" : "#242424" }
+                    ]}
+                  >
+                    {x}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
           </View>
         </View>
       );
@@ -102,7 +159,16 @@ export default class Home extends Component {
 
   render() {
     const { navigate } = this.props.navigation;
-    return <View style={styles.container}>{this._renderQuestion()}</View>;
+    return (
+      <View style={styles.container}>
+        <ScrollView>
+          {this._renderQuestion()}
+          <TouchableOpacity style={styles.confirmBtn}>
+            <Text style={styles.confirmBtnText}>生成智能方案</Text>
+          </TouchableOpacity>
+        </ScrollView>
+      </View>
+    );
   }
 }
 
@@ -136,16 +202,30 @@ const styles = StyleSheet.create({
   answerWrapper: {
     marginRight: 18,
     marginTop: 17,
-    paddingHorizontal: 10,
+    paddingHorizontal: 20,
     paddingVertical: 4,
+    height: 30,
     borderStyle: "solid",
-    borderColor: "#ccc",
+    borderColor: "#E6E6E6",
     borderWidth: 0.5,
     justifyContent: "center",
     alignItems: "center",
     borderRadius: 3
   },
   answer: {
-    fontSize: 15,
+    fontSize: 15
+    // color: "#242424",
+  },
+  confirmBtn: {
+    marginVertical: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#1B9341",
+    height: 45,
+    borderRadius: 5
+  },
+  confirmBtnText: {
+    fontSize: 16,
+    color: "white"
   }
 });