|
|
@@ -0,0 +1,194 @@
|
|
|
+import React, { Component } from "react"
|
|
|
+import { StyleSheet, Text, View, TextInput } from "react-native"
|
|
|
+import Ionicons from "react-native-vector-icons/Ionicons"
|
|
|
+import RNPickerSelect from 'react-native-picker-select';
|
|
|
+import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
|
|
|
+import MyButtom from '../component/MyButton'
|
|
|
+
|
|
|
+export default class Loginpage extends Component {
|
|
|
+ state = {
|
|
|
+ placeholderText: {
|
|
|
+ label: '1990-01-01',
|
|
|
+ value: null,
|
|
|
+ color: '#333333',
|
|
|
+ },
|
|
|
+ placeholderText2: {
|
|
|
+ label: '山东-烟台-莱山区',
|
|
|
+ value: null,
|
|
|
+ color: '#333333',
|
|
|
+ },
|
|
|
+ placeholderText3: {
|
|
|
+ label: '165',
|
|
|
+ value: null,
|
|
|
+ color: '#333333',
|
|
|
+ },
|
|
|
+
|
|
|
+ };
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <View style={styles.container}>
|
|
|
+ <View style={styles.itemArea}>
|
|
|
+ <Text style={styles.itemTitle}>请选择您的性别</Text>
|
|
|
+ <View style={styles.item}>
|
|
|
+ <View style={styles.itemOnceColor}>
|
|
|
+ <Text style={styles.itemOnceTextColor}>
|
|
|
+ 男
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ <View style={styles.itemOnce}>
|
|
|
+ <Text style={styles.itemOnceText}>
|
|
|
+ 女
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View style={styles.itemArea}>
|
|
|
+ <Text style={styles.itemTitle}>请输入您的昵称</Text>
|
|
|
+ <View style={styles.item}>
|
|
|
+ <TextInput
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ placeholderTextColor={"#999999"}
|
|
|
+ style={styles.TextInput}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View style={styles.itemArea}>
|
|
|
+ <Text style={styles.itemTitle}>请选择您的生日</Text>
|
|
|
+ <View style={styles.selectItem}>
|
|
|
+ <RNPickerSelect
|
|
|
+ placeholder={this.state.placeholderText}
|
|
|
+ placeholderTextColor={"#333333"}
|
|
|
+ onValueChange={(value) => console.log(value)}
|
|
|
+ items={[
|
|
|
+ { label: 'Football', value: 'football' },
|
|
|
+ { label: 'Baseball', value: 'baseball' },
|
|
|
+ { label: 'Hockey', value: 'hockey' },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View style={styles.itemArea}>
|
|
|
+ <Text style={styles.itemTitle}>请选择您的常居地</Text>
|
|
|
+ <View style={styles.selectItem}>
|
|
|
+ <RNPickerSelect
|
|
|
+ placeholder={this.state.placeholderText2}
|
|
|
+ placeholderTextColor={"#333333"}
|
|
|
+ onValueChange={(value) => console.log(value)}
|
|
|
+ items={[
|
|
|
+ { label: 'Football', value: 'football' },
|
|
|
+ { label: 'Baseball', value: 'baseball' },
|
|
|
+ { label: 'Hockey', value: 'hockey' },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View style={styles.itemArea}>
|
|
|
+ <Text style={styles.itemTitle}>请选择您的身高</Text>
|
|
|
+ <View style={styles.selectItem}>
|
|
|
+ <RNPickerSelect
|
|
|
+ placeholder={this.state.placeholderText3}
|
|
|
+ placeholderTextColor={"#333333"}
|
|
|
+ onValueChange={(value) => console.log(value)}
|
|
|
+ items={[
|
|
|
+ { label: 'Football', value: 'football' },
|
|
|
+ { label: 'Baseball', value: 'baseball' },
|
|
|
+ { label: 'Hockey', value: 'hockey' },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View style={styles.loginBtnArea}>
|
|
|
+ <MyButtom
|
|
|
+ text={"下一步"}
|
|
|
+ width={unitWidth * 502}
|
|
|
+ height={unitHeight * 84}
|
|
|
+ borderRadius={unitHeight * 84}
|
|
|
+ bgColor="#FA788A"
|
|
|
+ shadowBgc="rgba(250,120,138,1)"
|
|
|
+ style={{ fontSize: unitWidth * 32 }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+const styles = StyleSheet.create({
|
|
|
+ container: {
|
|
|
+ flex: 1,
|
|
|
+ paddingTop: getStatusBarHeight() + unitHeight * 30,
|
|
|
+ paddingLeft: unitWidth * 60,
|
|
|
+ paddingRight: unitWidth * 60,
|
|
|
+ },
|
|
|
+ itemArea: {
|
|
|
+ width: "100%"
|
|
|
+ },
|
|
|
+ itemTitle: {
|
|
|
+ fontSize: unitWidth * 28,
|
|
|
+ color: "#333333"
|
|
|
+ },
|
|
|
+ item: {
|
|
|
+ flexDirection: "row",
|
|
|
+ justifyContent: "space-between",
|
|
|
+ marginTop: unitHeight * 35,
|
|
|
+ marginBottom: unitHeight * 46
|
|
|
+ },
|
|
|
+ selectItem: {
|
|
|
+ width: "100%",
|
|
|
+ height: unitHeight * 68,
|
|
|
+ marginTop: unitHeight * 35,
|
|
|
+ borderRadius: unitHeight * 68,
|
|
|
+ justifyContent: "center",
|
|
|
+ paddingLeft: unitWidth * 50,
|
|
|
+ borderWidth: unitWidth * 1,
|
|
|
+ borderColor: "#ccc",
|
|
|
+ marginBottom: unitHeight * 46
|
|
|
+ },
|
|
|
+ itemOnce: {
|
|
|
+ width: unitWidth * 252,
|
|
|
+ height: unitHeight * 68,
|
|
|
+ borderRadius: unitHeight * 68,
|
|
|
+ justifyContent: "center",
|
|
|
+ alignItems: "center",
|
|
|
+ backgroundColor: "#fff",
|
|
|
+ borderWidth: unitWidth * 1,
|
|
|
+ borderColor: "#ccc"
|
|
|
+ },
|
|
|
+ itemOnceColor: {
|
|
|
+ borderRadius: unitHeight * 68,
|
|
|
+ backgroundColor: "#FA788A",
|
|
|
+ width: unitWidth * 252,
|
|
|
+ height: unitHeight * 68,
|
|
|
+ justifyContent: "center",
|
|
|
+ alignItems: "center"
|
|
|
+ },
|
|
|
+ itemOnceTextColor: {
|
|
|
+ fontSize: unitWidth * 28,
|
|
|
+ color: "#fff"
|
|
|
+ },
|
|
|
+ itemOnceText: {
|
|
|
+ fontSize: unitWidth * 28,
|
|
|
+ color: "#333333"
|
|
|
+ },
|
|
|
+ TextInput: {
|
|
|
+ width: "100%",
|
|
|
+ height: unitHeight * 78,
|
|
|
+ borderRadius: unitHeight * 78,
|
|
|
+ fontSize: unitWidth * 28,
|
|
|
+ paddingLeft: unitWidth * 50,
|
|
|
+ borderWidth: unitWidth * 1,
|
|
|
+ borderColor: "#ccc"
|
|
|
+ },
|
|
|
+ seletItem: {
|
|
|
+ width: "100%",
|
|
|
+ height: unitHeight * 78,
|
|
|
+ backgroundColor: "#f00"
|
|
|
+ },
|
|
|
+ loginBtnArea: {
|
|
|
+ width: "100%",
|
|
|
+ marginTop: unitHeight * 80,
|
|
|
+ height: unitHeight * 84,
|
|
|
+ justifyContent: 'center',
|
|
|
+ alignItems: 'center'
|
|
|
+ }
|
|
|
+
|
|
|
+})
|
杜鑫