日期选择

@@ -8,7 +8,8 @@ import {
   TouchableOpacity,
   ScrollView,
   ListView,
-  Dimensions
+  Dimensions,
+  DatePickerIOS
 } from "react-native";
 import { StackNavigator, TabNavigator } from "react-navigation";
 
@@ -32,7 +33,7 @@ export default class Home extends Component {
         {
           title: "3.您要为哪些家人投保呢？",
           type: "select",
-          answers: ["先生", "配偶", "儿子", "女儿", "母亲", "父亲"],
+          answers: ["先生", "妻子", "儿子", "女儿", "母亲", "父亲"],
           selected: 0
         },
         {
@@ -54,7 +55,8 @@ export default class Home extends Component {
           selected: 0
         }
       ],
-      answerList: []
+      answerList: [],
+      date: new Date()
     };
   }
   componentWillMount() {}
@@ -97,60 +99,54 @@ 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}>
-                    <Text style={styles.answer}>{x}</Text>
-                  </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 {
+                  <TouchableOpacity
+                    key={index2}
+                    style={[
+                      styles.answerWrapper,
                       {
-                        /* 选择日期 */
+                        backgroundColor:
+                          item.selected == index2 ? "#1B9341" : "white"
                       }
-                    }
-                  }}
-                >
-                  <Text
-                    style={[
-                      styles.answer,
-                      { color: item.selected == index2 ? "white" : "#242424" }
                     ]}
+                    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)
+                          ]
+                        });
+                      }
+                    }}
                   >
-                    {x}
-                  </Text>
-                </TouchableOpacity>
-              );
-            })}
+                    <Text
+                      style={[
+                        styles.answer,
+                        { color: item.selected == index2 ? "white" : "#242424" }
+                      ]}
+                    >
+                      {x}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })
+            ) : (
+              <View style={styles.dateWrapper}>
+                <DatePickerIOS
+                  style={styles.dateWrapper}
+                  date={this.state.date}
+                  onDateChange={date => this.setState({ date })}
+                  mode="date"
+                />
+              </View>
+            )}
           </View>
         </View>
       );
@@ -227,5 +223,8 @@ const styles = StyleSheet.create({
   confirmBtnText: {
     fontSize: 16,
     color: "white"
-  }
+  },
+  dateWrapper: {
+    width: 300,
+  },
 });

@@ -9,13 +9,17 @@ import {
   ScrollView,
   ListView,
   Dimensions,
+  DatePickerIOS
 } from "react-native";
 import { StackNavigator, TabNavigator } from "react-navigation";
 
 export default class Home extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      showDate: false,
+      date: new Date()
+    };
   }
   componentWillMount() {}
 
@@ -56,6 +60,25 @@ export default class Home extends Component {
     return (
       <View style={styles.container}>
         <Text>健康问卷开始</Text>
+        {this.state.showDate ? (
+          <DatePickerIOS
+            style={styles.dateWrapper}
+            date={this.state.date}
+            onDateChange={date => this.setState({ date })}
+            mode="date"
+          />
+        ) : null}
+
+        <TouchableOpacity
+          onPress={() => {
+            {/* alert(this.state.date); */}
+            this.setState({
+              showDate: !this.state.showDate
+            })
+          }}
+        >
+          <Text>打印时间</Text>
+        </TouchableOpacity>
       </View>
     );
   }
@@ -68,4 +91,10 @@ const styles = StyleSheet.create({
     alignItems: "stretch",
     backgroundColor: "#EFEFEF"
   },
+  dateWrapper: {
+    // position: "absolute",
+    // bottom: 200,
+    marginBottom: 50,
+    width: 250
+  }
 });