罗广聪

日期选择

@@ -8,7 +8,8 @@ import { @@ -8,7 +8,8 @@ import {
8 TouchableOpacity, 8 TouchableOpacity,
9 ScrollView, 9 ScrollView,
10 ListView, 10 ListView,
11 - Dimensions 11 + Dimensions,
  12 + DatePickerIOS
12 } from "react-native"; 13 } from "react-native";
13 import { StackNavigator, TabNavigator } from "react-navigation"; 14 import { StackNavigator, TabNavigator } from "react-navigation";
14 15
@@ -32,7 +33,7 @@ export default class Home extends Component { @@ -32,7 +33,7 @@ export default class Home extends Component {
32 { 33 {
33 title: "3.您要为哪些家人投保呢?", 34 title: "3.您要为哪些家人投保呢?",
34 type: "select", 35 type: "select",
35 - answers: ["先生", "配偶", "儿子", "女儿", "母亲", "父亲"], 36 + answers: ["先生", "妻子", "儿子", "女儿", "母亲", "父亲"],
36 selected: 0 37 selected: 0
37 }, 38 },
38 { 39 {
@@ -54,7 +55,8 @@ export default class Home extends Component { @@ -54,7 +55,8 @@ export default class Home extends Component {
54 selected: 0 55 selected: 0
55 } 56 }
56 ], 57 ],
57 - answerList: [] 58 + answerList: [],
  59 + date: new Date()
58 }; 60 };
59 } 61 }
60 componentWillMount() {} 62 componentWillMount() {}
@@ -97,21 +99,9 @@ export default class Home extends Component { @@ -97,21 +99,9 @@ export default class Home extends Component {
97 <Text style={styles.title}>{item.title}</Text> 99 <Text style={styles.title}>{item.title}</Text>
98 </View> 100 </View>
99 <View style={styles.answerContainer}> 101 <View style={styles.answerContainer}>
100 - {/* {item.type == "select" ? ( 102 + {item.type == "select" ? (
101 item.answers.map((x, index2) => { 103 item.answers.map((x, index2) => {
102 return ( 104 return (
103 - <TouchableOpacity key={index2} style={styles.answerWrapper}>  
104 - <Text style={styles.answer}>{x}</Text>  
105 - </TouchableOpacity>  
106 - );  
107 - })  
108 - ) : (  
109 - <TouchableOpacity style={styles.answerWrapper}>  
110 - <Text>{item.answers}</Text>  
111 - </TouchableOpacity>  
112 - )} */}  
113 - {item.answers.map((x, index2) => {  
114 - return (  
115 <TouchableOpacity 105 <TouchableOpacity
116 key={index2} 106 key={index2}
117 style={[ 107 style={[
@@ -133,10 +123,6 @@ export default class Home extends Component { @@ -133,10 +123,6 @@ export default class Home extends Component {
133 ...this.state.QuesList.slice(index + 1) 123 ...this.state.QuesList.slice(index + 1)
134 ] 124 ]
135 }); 125 });
136 - } else {  
137 - {  
138 - /* 选择日期 */  
139 - }  
140 } 126 }
141 }} 127 }}
142 > 128 >
@@ -150,7 +136,17 @@ export default class Home extends Component { @@ -150,7 +136,17 @@ export default class Home extends Component {
150 </Text> 136 </Text>
151 </TouchableOpacity> 137 </TouchableOpacity>
152 ); 138 );
153 - })} 139 + })
  140 + ) : (
  141 + <View style={styles.dateWrapper}>
  142 + <DatePickerIOS
  143 + style={styles.dateWrapper}
  144 + date={this.state.date}
  145 + onDateChange={date => this.setState({ date })}
  146 + mode="date"
  147 + />
  148 + </View>
  149 + )}
154 </View> 150 </View>
155 </View> 151 </View>
156 ); 152 );
@@ -227,5 +223,8 @@ const styles = StyleSheet.create({ @@ -227,5 +223,8 @@ const styles = StyleSheet.create({
227 confirmBtnText: { 223 confirmBtnText: {
228 fontSize: 16, 224 fontSize: 16,
229 color: "white" 225 color: "white"
230 - } 226 + },
  227 + dateWrapper: {
  228 + width: 300,
  229 + },
231 }); 230 });
@@ -9,13 +9,17 @@ import { @@ -9,13 +9,17 @@ import {
9 ScrollView, 9 ScrollView,
10 ListView, 10 ListView,
11 Dimensions, 11 Dimensions,
  12 + DatePickerIOS
12 } from "react-native"; 13 } from "react-native";
13 import { StackNavigator, TabNavigator } from "react-navigation"; 14 import { StackNavigator, TabNavigator } from "react-navigation";
14 15
15 export default class Home extends Component { 16 export default class Home extends Component {
16 constructor(props) { 17 constructor(props) {
17 super(props); 18 super(props);
18 - this.state = {}; 19 + this.state = {
  20 + showDate: false,
  21 + date: new Date()
  22 + };
19 } 23 }
20 componentWillMount() {} 24 componentWillMount() {}
21 25
@@ -56,6 +60,25 @@ export default class Home extends Component { @@ -56,6 +60,25 @@ export default class Home extends Component {
56 return ( 60 return (
57 <View style={styles.container}> 61 <View style={styles.container}>
58 <Text>健康问卷开始</Text> 62 <Text>健康问卷开始</Text>
  63 + {this.state.showDate ? (
  64 + <DatePickerIOS
  65 + style={styles.dateWrapper}
  66 + date={this.state.date}
  67 + onDateChange={date => this.setState({ date })}
  68 + mode="date"
  69 + />
  70 + ) : null}
  71 +
  72 + <TouchableOpacity
  73 + onPress={() => {
  74 + {/* alert(this.state.date); */}
  75 + this.setState({
  76 + showDate: !this.state.showDate
  77 + })
  78 + }}
  79 + >
  80 + <Text>打印时间</Text>
  81 + </TouchableOpacity>
59 </View> 82 </View>
60 ); 83 );
61 } 84 }
@@ -68,4 +91,10 @@ const styles = StyleSheet.create({ @@ -68,4 +91,10 @@ const styles = StyleSheet.create({
68 alignItems: "stretch", 91 alignItems: "stretch",
69 backgroundColor: "#EFEFEF" 92 backgroundColor: "#EFEFEF"
70 }, 93 },
  94 + dateWrapper: {
  95 + // position: "absolute",
  96 + // bottom: 200,
  97 + marginBottom: 50,
  98 + width: 250
  99 + }
71 }); 100 });