girlFrienfTerm.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. import React from "react"
  2. import { StyleSheet, Text, View } from "react-native"
  3. import { unitWidth, unitHeight } from "../utils/AdapterUtil";
  4. import RNPickerSelect from 'react-native-picker-select';
  5. import AntDesign from "react-native-vector-icons/AntDesign"
  6. import MyButtom from '../component/MyButton'
  7. export default class GirlFrienfTerm extends React.Component {
  8. render() {
  9. return (
  10. <View style={styles.container}>
  11. <View style={styles.formArea}>
  12. <View style={styles.formItem}>
  13. <RNPickerSelect
  14. placeholder={""}
  15. onValueChange={(value) => console.log(value)}
  16. items={[
  17. { label: 'Football', value: 'football' },
  18. { label: 'Baseball', value: 'baseball' },
  19. { label: 'Hockey', value: 'hockey' },
  20. ]}
  21. >
  22. <View style={styles.itemArea}>
  23. <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>年龄范围</Text>
  24. <AntDesign
  25. name={"right"}
  26. size={20}
  27. style={{ color: "#999999" }}
  28. />
  29. </View>
  30. </RNPickerSelect>
  31. </View>
  32. <View style={styles.formItem}>
  33. <RNPickerSelect
  34. placeholder={""}
  35. onValueChange={(value) => console.log(value)}
  36. items={[
  37. { label: 'Football', value: 'football' },
  38. { label: 'Baseball', value: 'baseball' },
  39. { label: 'Hockey', value: 'hockey' },
  40. ]}
  41. >
  42. <View style={styles.itemArea}>
  43. <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>身高范围</Text>
  44. <AntDesign
  45. name={"right"}
  46. size={20}
  47. style={{ color: "#999999" }}
  48. />
  49. </View>
  50. </RNPickerSelect>
  51. </View>
  52. <View style={styles.formItem}>
  53. <RNPickerSelect
  54. placeholder={""}
  55. onValueChange={(value) => console.log(value)}
  56. items={[
  57. { label: 'Football', value: 'football' },
  58. { label: 'Baseball', value: 'baseball' },
  59. { label: 'Hockey', value: 'hockey' },
  60. ]}
  61. >
  62. <View style={styles.itemArea}>
  63. <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>学历</Text>
  64. <AntDesign
  65. name={"right"}
  66. size={20}
  67. style={{ color: "#999999" }}
  68. />
  69. </View>
  70. </RNPickerSelect>
  71. </View>
  72. <View style={styles.formItem}>
  73. <RNPickerSelect
  74. placeholder={""}
  75. onValueChange={(value) => console.log(value)}
  76. items={[
  77. { label: 'Football', value: 'football' },
  78. { label: 'Baseball', value: 'baseball' },
  79. { label: 'Hockey', value: 'hockey' },
  80. ]}
  81. >
  82. <View style={styles.itemArea}>
  83. <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>居住地</Text>
  84. <AntDesign
  85. name={"right"}
  86. size={20}
  87. style={{ color: "#999999" }}
  88. />
  89. </View>
  90. </RNPickerSelect>
  91. </View>
  92. <View style={styles.formItem}>
  93. <RNPickerSelect
  94. placeholder={""}
  95. onValueChange={(value) => console.log(value)}
  96. items={[
  97. { label: 'Football', value: 'football' },
  98. { label: 'Baseball', value: 'baseball' },
  99. { label: 'Hockey', value: 'hockey' },
  100. ]}
  101. >
  102. <View style={styles.itemArea}>
  103. <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>年收入</Text>
  104. <AntDesign
  105. name={"right"}
  106. size={20}
  107. style={{ color: "#999999" }}
  108. />
  109. </View>
  110. </RNPickerSelect>
  111. </View>
  112. </View>
  113. <View style={styles.bottomBtn}>
  114. <MyButtom
  115. text={"下一步"}
  116. width={unitWidth * 502}
  117. height={unitHeight * 84}
  118. borderRadius={unitHeight * 84}
  119. bgColor="#FA788A"
  120. shadowBgc="rgba(250,120,138,1)"
  121. style={{ fontSize: unitWidth * 32 }}
  122. />
  123. </View>
  124. </View>
  125. )
  126. }
  127. }
  128. const styles = StyleSheet.create({
  129. container: {
  130. flex: 1
  131. },
  132. formArea: {
  133. width: "100%"
  134. },
  135. formItem: {
  136. width: "100%",
  137. height: unitHeight * 97,
  138. backgroundColor: "#fff",
  139. marginBottom: unitHeight * 6,
  140. },
  141. itemArea: {
  142. width: "100%",
  143. height: "100%",
  144. flexDirection: "row",
  145. justifyContent: "space-between",
  146. alignItems: "center",
  147. paddingLeft: unitWidth * 23,
  148. paddingRight: unitWidth * 24,
  149. borderBottomColor: "#F9F9F9",
  150. borderBottomWidth: 1
  151. },
  152. bottomBtn: {
  153. width: "100%",
  154. marginTop: unitHeight * 243,
  155. height: unitHeight * 84,
  156. justifyContent: 'center',
  157. alignItems: 'center'
  158. }
  159. })