忘记密码

js/navigator/AppNavigators.js

@@ -2,9 +2,23 @@ import {createAppContainer,createSwitchNavigator} from "react-navigation"
 import {createStackNavigator} from "react-navigation-stack"
 import WelcomePage from"../page/WelcomePage"
 import LoginPage from"../page/LoginPage"
+import register from "../page/register"
+import forgetPassWord from "../page/forgetPassWord"
 import HomePage from "../page/HomePage"
 
 const InitNavigator = createStackNavigator({
+    forgetPassWord:{
+        screen:forgetPassWord,
+        navigationOptions:{
+            header:null
+        }
+    },
+    register:{
+        screen:register,
+        navigationOptions:{
+            header:null
+        }
+    },
     LoginPage:{
         screen:LoginPage,
         navigationOptions:{

js/page/LoginPage.js

@@ -1,8 +1,6 @@
 import React, { Component } from "react"
-import { StyleSheet, Text, View, TextInput, Button } from "react-native"
-import NavigationUtil from "../navigator/NavigationUtil"
+import { StyleSheet, Text, View, TextInput } from "react-native"
 import EvilIcons from "react-native-vector-icons/EvilIcons"
-import Ionicons from "react-native-vector-icons/Ionicons"
 import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
 import MyButtom from '../component/MyButton'
 
@@ -10,7 +8,7 @@ export default class Loginpage extends Component {
 	state = {
 		pageTitle: "账号密码登录",
 		pageStatus: 0,
-		btnText:"登录"
+		btnText: "登录"
 	};
 	componentDidMount() {
 		this.timer = setTimeout(() => {
@@ -37,62 +35,27 @@ export default class Loginpage extends Component {
 							/>
 						</View>
 					</View>
-					{
-						this.state.pageStatus === 0 ? (
-							<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 style={styles.inputPass}>
-									<View style={styles.inputLeft}>
-										<Text style={styles.inputLeftText}>验证码</Text>
-									</View>
-									<View style={styles.TextInputRightArea2}>
-										<TextInput
-											placeholder="请输入验证码"
-											placeholderTextColor={"#999999"}
-											style={styles.TextInput2}
-										/>
-									</View>
-									<View style={styles.verifyCodeArea}>
-										<Text>获取验证码</Text>
-									</View>
-								</View>
-							)
-					}
-				</View>
-				{
-					this.state.pageStatus === 0 ? (<View style={styles.forgetPassArea}>
-						<Text>手机号注册登录</Text>
-						<Text>忘记密码</Text>
+					<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 style={styles.agree}>
-								<Ionicons
-									name={"md-radio-button-on"}
-									size={20}
-									style={{ color: "#FA788A", marginRight: unitWidth * 20}}
-								/>
-								<Text style={{ fontSize: unitWidth * 24, color: "#999999", marginRight: unitWidth * 2 }}>下一步即同意</Text>
-								<Text style={{ fontSize: unitWidth * 24, color: "#FA788A" }}>用户协议</Text>
-							</View>
-						)
-				}
-
-
+				</View>
+				<View style={styles.forgetPassArea}>
+					<Text>手机号注册登录</Text>
+					<Text>忘记密码</Text>
+				</View>
 				<View style={styles.loginBtnArea}>
 					<MyButtom
 						text={this.state.btnText}
@@ -104,7 +67,7 @@ export default class Loginpage extends Component {
 						style={{ fontSize: unitWidth * 32 }}
 					/>
 				</View>
-			</View>
+			</View >
 		)
 	}
 }
@@ -123,7 +86,6 @@ const styles = StyleSheet.create({
 	},
 	inputArea: {
 		width: unitWidth * 628,
-		// height: unitHeight * 236,
 		justifyContent: "space-between"
 	},
 	inputPhone: {
@@ -203,7 +165,7 @@ const styles = StyleSheet.create({
 		flexDirection: "row",
 		justifyContent: "center",
 		alignItems: "center",
-		marginTop: unitHeight * 30 
+		marginTop: unitHeight * 30
 	}
 
 })

js/page/forgetPassWord.js

@@ -0,0 +1,185 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, TextInput } from "react-native"
+import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
+import MyButtom from '../component/MyButton'
+
+export default class Loginpage extends Component {
+    state = {
+        pageTitle: "忘记密码",
+        btnText: "保存"
+    };
+    componentDidMount() {
+        this.timer = setTimeout(() => {
+            // NavigationUtil.resetToHomePage(this.props)
+        }, 5000)
+    }
+    componentWillMount() {
+        this.timer && clearTimeout(this.timer)
+    }
+    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}>
+                            <Text style={styles.inputLeftText}>验证码</Text>
+                        </View>
+                        <View style={styles.TextInputRightArea2}>
+                            <TextInput
+                                placeholder="请输入验证码"
+                                placeholderTextColor={"#999999"}
+                                style={styles.TextInput2}
+                            />
+                        </View>
+                        <View style={styles.verifyCodeArea}>
+                            <Text>获取验证码</Text>
+                        </View>
+                    </View>
+                </View>
+                <View style={styles.inputNewPass}>
+                    <View style={styles.inputLeft}>
+                        <Text style={styles.inputLeftText}>输入新密码</Text>
+                    </View>
+                    <View style={styles.inputRight}>
+                        <TextInput
+                            placeholder="请输入新密码"
+                            placeholderTextColor={"#999999"}
+                            style={styles.TextInput}
+                        />
+                    </View>
+                </View>
+                <View style={styles.loginBtnArea}>
+                    <MyButtom
+                        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() + unitWidth * 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"
+    },
+    inputNewPass: {
+        width: "100%",
+        height: unitHeight * 98,
+        borderRadius: unitWidth * 98,
+        borderWidth: unitWidth * 1,
+        borderColor: "#ccc",
+        flexDirection: "row",
+        marginTop:unitHeight * 40,
+    },
+    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
+    },
+    loginBtnArea: {
+        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
+    }
+
+})

js/page/register.js

@@ -0,0 +1,175 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, TextInput } from "react-native"
+import Ionicons from "react-native-vector-icons/Ionicons"
+import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
+import MyButtom from '../component/MyButton'
+
+export default class Loginpage extends Component {
+    state = {
+        pageTitle: "手机号登录注册",
+        btnText: "下一步"
+    };
+    componentDidMount() {
+        this.timer = setTimeout(() => {
+            // NavigationUtil.resetToHomePage(this.props)
+        }, 5000)
+    }
+    componentWillMount() {
+        this.timer && clearTimeout(this.timer)
+    }
+    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}>
+                            <Text style={styles.inputLeftText}>验证码</Text>
+                        </View>
+                        <View style={styles.TextInputRightArea2}>
+                            <TextInput
+                                placeholder="请输入验证码"
+                                placeholderTextColor={"#999999"}
+                                style={styles.TextInput2}
+                            />
+                        </View>
+                        <View style={styles.verifyCodeArea}>
+                            <Text>获取验证码</Text>
+                        </View>
+                    </View>
+                </View>
+
+                <View style={styles.agree}>
+                    <Ionicons
+                        name={"md-radio-button-on"}
+                        size={20}
+                        style={{ color: "#FA788A", marginRight: unitWidth * 20 }}
+                    />
+                    <Text style={{ fontSize: unitWidth * 24, color: "#999999", marginRight: unitWidth * 2 }}>下一步即同意</Text>
+                    <Text style={{ fontSize: unitWidth * 24, color: "#FA788A" }}>用户协议</Text>
+                </View>
+                <View style={styles.loginBtnArea}>
+                    <MyButtom
+                        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() + unitWidth * 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
+    },
+    loginBtnArea: {
+        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
+    }
+
+})