kangaroo/js/page/LoginPage.js

import React, { Component } from "react"
import { StyleSheet, Text, View, TextInput } from "react-native"
import EvilIcons from "react-native-vector-icons/EvilIcons"
import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
import MyButtom from '../component/MyButton'
import NavigationUtil from "../navigator/NavigationUtil"

export default class Loginpage extends Component {
	state = {
		pageTitle: "账号密码登录",
		pageStatus: 0,
		btnText: "登录"
	};
	tohome=()=>{
		NavigationUtil.resetToHomePage(this.props)
	}
	toRegister=()=>{
		const { navigation } = this.props;
		navigation.navigate("Register")
	}
	toForgetPassWord=()=>{
		const { navigation } = this.props;
		navigation.navigate("ForgetPassWord")
	}
	render() {
		return (
			<View style={styles.container}>
				<Text style={styles.loginTitle}>{this.state.pageTitle}</Text>
				<View style={styles.inputArea}>
					<View style={styles.inputPhone}>
						<View style={styles.inputLeft}>
							<Text style={styles.inputLeftText}>+86</Text>
						</View>
						<View style={styles.inputRight}>
							<TextInput
								placeholder="请输入手机号"
								placeholderTextColor={"#999999"}
								style={styles.TextInput}
							/>
						</View>
					</View>
					<View style={styles.inputPass}>
						<View style={styles.inputLeft}>
							<EvilIcons
								name={"unlock"}
								size={38}
								style={{ color: "#333333" }}
							/>
						</View>
						<View>
							<TextInput
								placeholder="请输入密码"
								placeholderTextColor={"#999999"}
								style={styles.TextInput}
							/>
						</View>
					</View>
				</View>
				<View style={styles.forgetPassArea}>
					<Text onPress={this.toRegister}>手机号注册登录</Text>
					<Text onPress={this.toForgetPassWord}>忘记密码</Text>
				</View>
				<View style={styles.bottomBtn}>
					<MyButtom
						onPress={this.tohome}
						text={this.state.btnText}
						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 * 138,
		paddingLeft: unitWidth * 60,
		paddingRight: unitWidth * 60,
	},
	loginTitle: {
		fontSize: unitWidth * 38,
		fontWeight: "bold",
		color: "rgba(250,120,138,1)",
		marginBottom: unitWidth * 70
	},
	inputArea: {
		width: unitWidth * 628,
		justifyContent: "space-between"
	},
	inputPhone: {
		width: "100%",
		height: unitHeight * 98,
		borderRadius: unitWidth * 98,
		borderWidth: unitWidth * 1,
		borderColor: "#ccc",
		flexDirection: "row"
	},
	inputLeft: {
		marginTop: unitHeight * 9,
		width: unitWidth * 147,
		height: unitHeight * 80,
		borderRightWidth: unitWidth * 1,
		borderRightColor: "#ccc",
		justifyContent: "center",
		alignItems: "center"
	},
	inputRight: {
		width: unitWidth * 480,
		height: "100%"
	},
	TextInput: {
		width: "100%",
		height: "100%",
		paddingLeft: unitWidth * 26,
		fontSize: unitWidth * 28
	},
	TextInput2: {
		fontSize: unitWidth * 28
	},
	TextInputRightArea2: {
		flex: 3,
		height: "100%",
		paddingLeft: unitWidth * 26,
		fontSize: unitWidth * 28,
		justifyContent: "center"
	},
	verifyCodeArea: {
		flex: 2,
		height: "100%",
		justifyContent: "center",
		alignItems: "center"
	},
	verifyCode: {
		fontSize: unitWidth * 28,
		color: "#333333"
	},
	inputPass: {
		width: "100%",
		marginTop: unitHeight * 40,
		height: unitHeight * 98,
		borderRadius: unitWidth * 98,
		borderWidth: unitWidth * 1,
		borderColor: "#ccc",
		flexDirection: "row"
	},
	forgetPassArea: {
		flexDirection: "row",
		justifyContent: "space-between",
		width: "100%",
		fontSize: unitWidth * 28,
		color: "#333333",
		marginTop: unitHeight * 28
	},
	bottomBtn: {
		width: "100%",
		marginTop: unitHeight * 98,
		height: unitHeight * 84,
		justifyContent: 'center',
		alignItems: 'center'
	},
	agree: {
		width: "100%",
		height: unitHeight * 26,
		flexDirection: "row",
		justifyContent: "center",
		alignItems: "center",
		marginTop: unitHeight * 30
	}

})