123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- import React, { Component } from "react"
- import { StyleSheet, Text, View, TextInput } from "react-native"
- 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.bottomBtn}>
- <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"
- },
- bottomBtn: {
- width: "100%",
- marginTop: unitHeight * 80,
- height: unitHeight * 84,
- justifyContent: 'center',
- alignItems: 'center'
- }
- })
|