罗广聪 / ProtectGod

Go to a project
Toggle navigation Toggle navigation pinning
罗广聪
5888fb5c 1 parent a3f6cfe1

日期选择

Inline Side-by-side
Showing 2 changed files with 81 additions and 53 deletions
@@ -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,60 +99,54 @@ export default class Home extends Component { @@ -97,60 +99,54 @@ 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}> 105 + <TouchableOpacity
104 - <Text style={styles.answer}>{x}</Text> 106 + key={index2}
105 - </TouchableOpacity> 107 + style={[
106 - ); 108 + styles.answerWrapper,
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  
116 - key={index2}  
117 - style={[  
118 - styles.answerWrapper,  
119 - {  
120 - backgroundColor:  
121 - item.selected == index2 ? "#1B9341" : "white"  
122 - }  
123 - ]}  
124 - onPress={() => {  
125 - if (item.type == "select") {  
126 - this.setState({  
127 - QuesList: [  
128 - ...this.state.QuesList.slice(0, index),  
129 - {  
130 - ...this.state.QuesList[index],  
131 - selected: index2  
132 - },  
133 - ...this.state.QuesList.slice(index + 1)  
134 - ]  
135 - });  
136 - } else {  
137 { 109 {
138 - /* 选择日期 */ 110 + backgroundColor:
  111 + item.selected == index2 ? "#1B9341" : "white"
139 } 112 }
140 - }  
141 - }}  
142 - >  
143 - <Text  
144 - style={[  
145 - styles.answer,  
146 - { color: item.selected == index2 ? "white" : "#242424" }  
147 ]} 113 ]}
  114 + onPress={() => {
  115 + if (item.type == "select") {
  116 + this.setState({
  117 + QuesList: [
  118 + ...this.state.QuesList.slice(0, index),
  119 + {
  120 + ...this.state.QuesList[index],
  121 + selected: index2
  122 + },
  123 + ...this.state.QuesList.slice(index + 1)
  124 + ]
  125 + });
  126 + }
  127 + }}
148 > 128 >
149 - {x} 129 + <Text
150 - </Text> 130 + style={[
151 - </TouchableOpacity> 131 + styles.answer,
152 - ); 132 + { color: item.selected == index2 ? "white" : "#242424" }
153 - })} 133 + ]}
  134 + >
  135 + {x}
  136 + </Text>
  137 + </TouchableOpacity>
  138 + );
  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 });