注册完善

js/navigator/AppNavigators.js

@@ -4,10 +4,17 @@ import WelcomePage from"../page/WelcomePage"
 import LoginPage from"../page/LoginPage"
 import register from "../page/register"
 import register1 from "../page/register1"
+import register2 from "../page/register2"
 import forgetPassWord from "../page/forgetPassWord"
 import HomePage from "../page/HomePage"
 
 const InitNavigator = createStackNavigator({
+    register2:{
+        screen:register2,
+        navigationOptions:{
+            headerTitle:"完善资料"
+        }
+    },
     register1:{
         screen:register1,
         navigationOptions:{

js/page/LoginPage.js

@@ -56,7 +56,7 @@ export default class Loginpage extends Component {
 					<Text>手机号注册登录</Text>
 					<Text>忘记密码</Text>
 				</View>
-				<View style={styles.loginBtnArea}>
+				<View style={styles.bottomBtn}>
 					<MyButtom
 						text={this.state.btnText}
 						width={unitWidth * 502}
@@ -152,7 +152,7 @@ const styles = StyleSheet.create({
 		color: "#333333",
 		marginTop: unitHeight * 28
 	},
-	loginBtnArea: {
+	bottomBtn: {
 		width: "100%",
 		marginTop: unitHeight * 98,
 		height: unitHeight * 84,

js/page/forgetPassWord.js

@@ -61,7 +61,7 @@ export default class Loginpage extends Component {
                         />
                     </View>
                 </View>
-                <View style={styles.loginBtnArea}>
+                <View style={styles.bottomBtn}>
                     <MyButtom
                         text={this.state.btnText}
                         width={unitWidth * 502}
@@ -166,7 +166,7 @@ const styles = StyleSheet.create({
         color: "#333333",
         marginTop: unitHeight * 28
     },
-    loginBtnArea: {
+    bottomBtn: {
         width: "100%",
         marginTop: unitHeight * 98,
         height: unitHeight * 84,

js/page/register.js

@@ -52,7 +52,7 @@ export default class Loginpage extends Component {
                     <Text style={{ fontSize: unitWidth * 24, color: "#999999", marginRight: unitWidth * 2 }}>下一步即同意</Text>
                     <Text style={{ fontSize: unitWidth * 24, color: "#FA788A" }}>用户协议</Text>
                 </View>
-                <View style={styles.loginBtnArea}>
+                <View style={styles.bottomBtn}>
                     <MyButtom
                         text={this.state.btnText}
                         width={unitWidth * 502}
@@ -148,7 +148,7 @@ const styles = StyleSheet.create({
         color: "#333333",
         marginTop: unitHeight * 28
     },
-    loginBtnArea: {
+    bottomBtn: {
         width: "100%",
         marginTop: unitHeight * 98,
         height: unitHeight * 84,

js/page/register1.js

@@ -1,6 +1,5 @@
 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'
@@ -97,7 +96,7 @@ export default class Loginpage extends Component {
                         />
                     </View>
                 </View>
-                <View style={styles.loginBtnArea}>
+                <View style={styles.bottomBtn}>
                     <MyButtom
                         text={"下一步"}
                         width={unitWidth * 502}
@@ -183,7 +182,7 @@ const styles = StyleSheet.create({
         height: unitHeight * 78,
         backgroundColor: "#f00"
     },
-    loginBtnArea: {
+    bottomBtn: {
         width: "100%",
         marginTop: unitHeight * 80,
         height: unitHeight * 84,

js/page/register2.js

@@ -0,0 +1,294 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, TextInput } from "react-native"
+import AntDesign from "react-native-vector-icons/AntDesign"
+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: '10w-20w',
+            value: null,
+            color: '#333333',
+        }
+    };
+    render() {
+        return (
+            <View style={styles.container}>
+                <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.item}>
+                        <View style={styles.itemOnceColor}>
+                            <Text style={styles.itemOnceTextColor}>
+                                高中及以下
+                            </Text>
+                        </View>
+                        <View style={styles.itemOnce}>
+                            <Text style={styles.itemOnceText}>
+                                大专
+                            </Text>
+                        </View>
+                        <View style={styles.itemOnce}>
+                            <Text style={styles.itemOnceText}>
+                                本科
+                            </Text>
+                        </View>
+                        <View style={styles.itemOnce}>
+                            <Text style={styles.itemOnceText}>
+                                硕士
+                            </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.itemList}>
+                        <AntDesign
+                            name={"message1"}
+                            size={24}
+                            style={{ color: "#FA7B8D", marginRight: unitWidth * 20 }}
+                        />
+                        <View style={styles.itemListCenter}>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    薯条
+                            </Text>
+                            </View>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    素食
+                            </Text>
+                            </View>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    甜品
+                            </Text>
+                            </View>
+                        </View>
+
+
+                        <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>自定义</Text>
+                    </View>
+                    <View style={styles.itemList}>
+                        <AntDesign
+                            name={"message1"}
+                            size={24}
+                            style={{ color: "#FA7B8D", marginRight: unitWidth * 20 }}
+                        />
+                        <View style={styles.itemListCenter}>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    薯条
+                            </Text>
+                            </View>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    素食
+                            </Text>
+                            </View>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    甜品
+                            </Text>
+                            </View>
+                        </View>
+                        <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>自定义</Text>
+                    </View>
+                    <View style={styles.itemList}>
+                        <AntDesign
+                            name={"message1"}
+                            size={24}
+                            style={{ color: "#FA7B8D", marginRight: unitWidth * 20 }}
+                        />
+                        <View style={styles.itemListCenter}>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    薯条
+                            </Text>
+                            </View>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    素食
+                            </Text>
+                            </View>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    甜品
+                            </Text>
+                            </View>
+                        </View>
+                        <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>自定义</Text>
+                    </View>
+                    <View style={styles.itemList}>
+                        <AntDesign
+                            name={"message1"}
+                            size={24}
+                            style={{ color: "#FA7B8D", marginRight: unitWidth * 20 }}
+                        />
+                        <View style={styles.itemListCenter}>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    薯条
+                            </Text>
+                            </View>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    素食
+                            </Text>
+                            </View>
+                            <View style={styles.itemListCOnce}>
+                                <Text style={styles.itemListOnceText}>
+                                    甜品
+                            </Text>
+                            </View>
+                        </View>
+
+
+                        <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>自定义</Text>
+                    </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",
+        marginTop: unitHeight * 35,
+        marginBottom: unitHeight * 46
+    },
+    itemList: {
+        flexDirection: "row",
+        marginTop: unitHeight * 20,
+        alignItems: "center",
+        justifyContent: "flex-start"
+    },
+    itemListCenter: {
+        width: unitWidth * 370,
+        flexDirection: "row",
+        justifyContent: "flex-start"
+    },
+    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: {
+        height: unitHeight * 48,
+        borderRadius: unitHeight * 28,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#fff",
+        borderWidth: unitWidth * 1,
+        borderColor: "#ccc",
+        paddingLeft: unitWidth * 20,
+        paddingRight: unitWidth * 20,
+        marginRight: unitWidth * 20
+    },
+    itemListCOnce: {
+        height: unitHeight * 42,
+        borderRadius: unitHeight * 28,
+        justifyContent: "center",
+        alignItems: "center",
+        borderWidth: unitWidth * 1,
+        borderColor: "#FA7B8D",
+        width: unitWidth * 108,
+        marginRight: unitWidth * 20
+    },
+    itemOnceColor: {
+        borderRadius: unitHeight * 28,
+        backgroundColor: "#FA788A",
+        height: unitHeight * 48,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingLeft: unitWidth * 20,
+        paddingRight: unitWidth * 20,
+        marginRight: unitWidth * 20
+    },
+    itemOnceTextColor: {
+        fontSize: unitWidth * 28,
+        color: "#fff"
+    },
+    itemOnceText: {
+        fontSize: unitWidth * 28,
+        color: "#333333"
+    },
+    itemListOnceText: {
+        fontSize: unitWidth * 24,
+        color: "#FA7B8D"
+    },
+    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 * 343,
+        height: unitHeight * 84,
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+
+})