日期选择

@@ -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,21 +99,9 @@ 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={[
@@ -133,10 +123,6 @@ export default class Home extends Component {
                             ...this.state.QuesList.slice(index + 1)
                           ]
                         });
-                    } else {
-                      {
-                        /* 选择日期 */
-                      }
                       }
                     }}
                   >
@@ -150,7 +136,17 @@ export default class Home extends Component {
                     </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
+  }
 });