我的资料

js/navigator/AppNavigators.js

@@ -1,7 +1,7 @@
-import {createAppContainer,createSwitchNavigator} from "react-navigation"
-import {createStackNavigator} from "react-navigation-stack"
-import WelcomePage from"../page/WelcomePage"
-import LoginPage from"../page/LoginPage"
+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 Register1 from "../page/Register1"
 import Register2 from "../page/Register2"
@@ -15,108 +15,115 @@ import GiftPay from "../page/GiftPay"
 import UserAgree from "../page/UserAgree"
 import Suggestion from "../page/Suggestion"
 import Setting from "../page/Setting"
+import MyInfo from "../page/MyInfo"
 
 const InitNavigator = createStackNavigator({
-    LoginPage:{
-        screen:LoginPage,
-        navigationOptions:{
-            header:null
+    LoginPage: {
+        screen: LoginPage,
+        navigationOptions: {
+            header: null
         }
     },
-    WelcomePage:{
-        screen:WelcomePage,
-        navigationOptions:{
-            header:null
+    WelcomePage: {
+        screen: WelcomePage,
+        navigationOptions: {
+            header: null
         }
     }
 })
 const MainNavigator = createStackNavigator({
-    Setting:{
-        screen:Setting,
-        navigationOptions:{
-            headerTitle:"设置"
+    MyInfo: {
+        screen: MyInfo,
+        navigationOptions: {
+            headerTitle: "我的资料"
         }
     },
-    Suggestion:{
-        screen:Suggestion,
-        navigationOptions:{
-            headerTitle:"意见反馈"
+    Setting: {
+        screen: Setting,
+        navigationOptions: {
+            headerTitle: "设置"
         }
     },
-    UserAgree:{
-        screen:UserAgree,
-        navigationOptions:{
-            headerTitle:"用户协议"
+    Suggestion: {
+        screen: Suggestion,
+        navigationOptions: {
+            headerTitle: "意见反馈"
         }
     },
-    GiftPay:{
-        screen:GiftPay,
-        navigationOptions:{
-            headerTitle:"收银台"
+    UserAgree: {
+        screen: UserAgree,
+        navigationOptions: {
+            headerTitle: "用户协议"
         }
     },
-    GirlFrienfTerm:{
-        screen:GirlFrienfTerm,
-        navigationOptions:{
-            headerTitle:"择偶条件"
+    GiftPay: {
+        screen: GiftPay,
+        navigationOptions: {
+            headerTitle: "收银台"
         }
     },
-    UserCard:{
-        screen:UserCard,
-        navigationOptions:{
-            header:null
+    GirlFrienfTerm: {
+        screen: GirlFrienfTerm,
+        navigationOptions: {
+            headerTitle: "择偶条件"
         }
     },
-    HomePage:{
-        screen:HomePage,
-        navigationOptions:{
-            header:null
+    UserCard: {
+        screen: UserCard,
+        navigationOptions: {
+            header: null
         }
     },
-    Meet:{
-        screen:Meet,
-        navigationOptions:{
-            headerTitle:"偶遇"
+    HomePage: {
+        screen: HomePage,
+        navigationOptions: {
+            header: null
         }
     },
-    Register3:{
-        screen:Register3,
-        navigationOptions:{
-            headerTitle:"完善资料"
+    Meet: {
+        screen: Meet,
+        navigationOptions: {
+            headerTitle: "偶遇"
         }
     },
-    Register2:{
-        screen:Register2,
-        navigationOptions:{
-            headerTitle:"完善资料"
+    Register3: {
+        screen: Register3,
+        navigationOptions: {
+            headerTitle: "完善资料"
         }
     },
-    Register1:{
-        screen:Register1,
-        navigationOptions:{
-            headerTitle:"完善资料"
+    Register2: {
+        screen: Register2,
+        navigationOptions: {
+            headerTitle: "完善资料"
         }
     },
-    ForgetPassWord:{
-        screen:ForgetPassWord,
-        navigationOptions:{
-            header:null
+    Register1: {
+        screen: Register1,
+        navigationOptions: {
+            headerTitle: "完善资料"
         }
     },
-    Register:{
-        screen:Register,
-        navigationOptions:{
-            header:null
+    ForgetPassWord: {
+        screen: ForgetPassWord,
+        navigationOptions: {
+            header: null
+        }
+    },
+    Register: {
+        screen: Register,
+        navigationOptions: {
+            header: null
         }
     },
 })
 export default createAppContainer(createSwitchNavigator({
     // Init:InitNavigator,
-    Main:MainNavigator
+    Main: MainNavigator
 },
-{
-    navigationOptions:{
-        header:null
+    {
+        navigationOptions: {
+            header: null
+        }
     }
-}
 ))

js/page/MyInfo.js

@@ -0,0 +1,310 @@
+import React, { Component } from "react"
+import { StyleSheet, View, Text, Image } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+import RNPickerSelect from 'react-native-picker-select';
+import AntDesign from "react-native-vector-icons/AntDesign"
+
+export default class MyInfo extends Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.titleTip}>
+                    <AntDesign
+                        name={"pay-circle1"}
+                        size={20}
+                        style={{ color: "#FA788A", marginRight: unitWidth * 12 }}
+                    />
+                    <Text style={{ color: "#FA788A", fontSize: unitWidth * 28 }}>完成10项资料后，你才会被系统推荐给他人</Text>
+                </View>
+                <View style={styles.formArea}>
+                    <View style={styles.formItem}>
+                        <RNPickerSelect
+                            placeholder={""}
+                            onValueChange={(value) => console.log(value)}
+                            items={[
+                                { label: 'Football', value: 'football' },
+                                { label: 'Baseball', value: 'baseball' },
+                                { label: 'Hockey', value: 'hockey' },
+                            ]}
+                        >
+                            <View style={styles.itemArea}>
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>头像</Text>
+                                <View style={styles.itemRight}>
+                                    <Image
+                                        source={require("../../static/userPhone.png")}
+                                        style={styles.userIcon}
+                                    />
+                                    <AntDesign
+                                        name={"right"}
+                                        size={20}
+                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
+                                    />
+                                </View>
+
+                            </View>
+                        </RNPickerSelect>
+                    </View>
+                    <View style={styles.formItem}>
+                        <RNPickerSelect
+                            placeholder={""}
+                            onValueChange={(value) => console.log(value)}
+                            items={[
+                                { label: 'Football', value: 'football' },
+                                { label: 'Baseball', value: 'baseball' },
+                                { label: 'Hockey', value: 'hockey' },
+                            ]}
+                        >
+                            <View style={styles.itemArea}>
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>姓名</Text>
+                                <View style={styles.itemRight}>
+                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>张晓明</Text>
+                                    <AntDesign
+                                        name={"right"}
+                                        size={20}
+                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
+                                    />
+                                </View>
+
+                            </View>
+                        </RNPickerSelect>
+                    </View>
+                    <View style={styles.formItem}>
+                        <RNPickerSelect
+                            placeholder={""}
+                            onValueChange={(value) => console.log(value)}
+                            items={[
+                                { label: 'Football', value: 'football' },
+                                { label: 'Baseball', value: 'baseball' },
+                                { label: 'Hockey', value: 'hockey' },
+                            ]}
+                        >
+                            <View style={styles.itemArea}>
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>性别</Text>
+                                <View style={styles.itemRight}>
+                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>女</Text>
+                                    <AntDesign
+                                        name={"right"}
+                                        size={20}
+                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
+                                    />
+                                </View>
+
+                            </View>
+                        </RNPickerSelect>
+                    </View>
+                    <View style={styles.formItem}>
+                        <RNPickerSelect
+                            placeholder={""}
+                            onValueChange={(value) => console.log(value)}
+                            items={[
+                                { label: 'Football', value: 'football' },
+                                { label: 'Baseball', value: 'baseball' },
+                                { label: 'Hockey', value: 'hockey' },
+                            ]}
+                        >
+                            <View style={styles.itemArea}>
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>出生日期</Text>
+                                <View style={styles.itemRight}>
+                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>1990-01-01</Text>
+                                    <AntDesign
+                                        name={"right"}
+                                        size={20}
+                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
+                                    />
+                                </View>
+
+                            </View>
+                        </RNPickerSelect>
+                    </View>
+                    <View style={styles.formItem}>
+                        <RNPickerSelect
+                            placeholder={""}
+                            onValueChange={(value) => console.log(value)}
+                            items={[
+                                { label: 'Football', value: 'football' },
+                                { label: 'Baseball', value: 'baseball' },
+                                { label: 'Hockey', value: 'hockey' },
+                            ]}
+                        >
+                            <View style={styles.itemArea}>
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>居住地</Text>
+                                <View style={styles.itemRight}>
+                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>山东省烟台市莱山区</Text>
+                                    <AntDesign
+                                        name={"right"}
+                                        size={20}
+                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
+                                    />
+                                </View>
+
+                            </View>
+                        </RNPickerSelect>
+                    </View>
+                    <View style={styles.formItem}>
+                        <RNPickerSelect
+                            placeholder={""}
+                            onValueChange={(value) => console.log(value)}
+                            items={[
+                                { label: 'Football', value: 'football' },
+                                { label: 'Baseball', value: 'baseball' },
+                                { label: 'Hockey', value: 'hockey' },
+                            ]}
+                        >
+                            <View style={styles.itemArea}>
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>身高</Text>
+                                <View style={styles.itemRight}>
+                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>170cm</Text>
+                                    <AntDesign
+                                        name={"right"}
+                                        size={20}
+                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
+                                    />
+                                </View>
+
+                            </View>
+                        </RNPickerSelect>
+                    </View>
+                    <View style={styles.formItem}>
+                        <RNPickerSelect
+                            placeholder={""}
+                            onValueChange={(value) => console.log(value)}
+                            items={[
+                                { label: 'Football', value: 'football' },
+                                { label: 'Baseball', value: 'baseball' },
+                                { label: 'Hockey', value: 'hockey' },
+                            ]}
+                        >
+                            <View style={styles.itemArea}>
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>体重</Text>
+                                <View style={styles.itemRight}>
+                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>55kg</Text>
+                                    <AntDesign
+                                        name={"right"}
+                                        size={20}
+                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
+                                    />
+                                </View>
+
+                            </View>
+                        </RNPickerSelect>
+                    </View>
+                    <View style={styles.formItem}>
+                        <RNPickerSelect
+                            placeholder={""}
+                            onValueChange={(value) => console.log(value)}
+                            items={[
+                                { label: 'Football', value: 'football' },
+                                { label: 'Baseball', value: 'baseball' },
+                                { label: 'Hockey', value: 'hockey' },
+                            ]}
+                        >
+                            <View style={styles.itemArea}>
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>行业</Text>
+                                <View style={styles.itemRight}>
+                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>互联网行业</Text>
+                                    <AntDesign
+                                        name={"right"}
+                                        size={20}
+                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
+                                    />
+                                </View>
+
+                            </View>
+                        </RNPickerSelect>
+                    </View>
+                    <View style={styles.formItem}>
+                        <RNPickerSelect
+                            placeholder={""}
+                            onValueChange={(value) => console.log(value)}
+                            items={[
+                                { label: 'Football', value: 'football' },
+                                { label: 'Baseball', value: 'baseball' },
+                                { label: 'Hockey', value: 'hockey' },
+                            ]}
+                        >
+                            <View style={styles.itemArea}>
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>年收入</Text>
+                                <View style={styles.itemRight}>
+                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>15-20w</Text>
+                                    <AntDesign
+                                        name={"right"}
+                                        size={20}
+                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
+                                    />
+                                </View>
+
+                            </View>
+                        </RNPickerSelect>
+                    </View>
+                    <View style={styles.formItem}>
+                        <RNPickerSelect
+                            placeholder={""}
+                            onValueChange={(value) => console.log(value)}
+                            items={[
+                                { label: 'Football', value: 'football' },
+                                { label: 'Baseball', value: 'baseball' },
+                                { label: 'Hockey', value: 'hockey' },
+                            ]}
+                        >
+                            <View style={styles.itemArea}>
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>兴趣爱好</Text>
+                                <View style={styles.itemRight}>
+                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>it</Text>
+                                    <AntDesign
+                                        name={"right"}
+                                        size={20}
+                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
+                                    />
+                                </View>
+
+                            </View>
+                        </RNPickerSelect>
+                    </View>
+
+                </View>
+            </View>
+        )
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: "center"
+    },
+    titleTip: {
+        width: "100%",
+        height: unitHeight * 84,
+        backgroundColor: "#FCF2F6",
+        flexDirection:"row",
+        alignItems:"center",
+        paddingLeft:unitWidth * 24,
+    },
+    formArea: {
+        width: "100%"
+    },
+    formItem: {
+        width: "100%",
+        height: unitHeight * 97,
+        backgroundColor: "#fff",
+        marginBottom: unitHeight * 6,
+    },
+    itemArea: {
+        width: "100%",
+        height: "100%",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingLeft: unitWidth * 23,
+        paddingRight: unitWidth * 24,
+        borderBottomColor: "#F9F9F9",
+        borderBottomWidth: 1
+    },
+    itemRight: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    userIcon: {
+        width: unitWidth * 66,
+        height: unitHeight * 66
+    }
+})

js/page/Setting.js

@@ -24,7 +24,7 @@ export default class Setting extends Component {
                                 <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>我的资料</Text>
                                 <AntDesign
                                     name={"right"}
-                                    size={24}
+                                    size={20}
                                     style={{ color: "#999999" }}
                                 />
                             </View>
@@ -44,7 +44,7 @@ export default class Setting extends Component {
                                 <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>用户反馈</Text>
                                 <AntDesign
                                     name={"right"}
-                                    size={24}
+                                    size={20}
                                     style={{ color: "#999999" }}
                                 />
                             </View>
@@ -64,7 +64,7 @@ export default class Setting extends Component {
                                 <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>用户及隐私协议</Text>
                                 <AntDesign
                                     name={"right"}
-                                    size={24}
+                                    size={20}
                                     style={{ color: "#999999" }}
                                 />
                             </View>
@@ -84,7 +84,7 @@ export default class Setting extends Component {
                                 <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>清除缓存</Text>
                                 <AntDesign
                                     name={"right"}
-                                    size={24}
+                                    size={20}
                                     style={{ color: "#999999" }}
                                 />
                             </View>
@@ -109,8 +109,6 @@ export default class Setting extends Component {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        paddingLeft: unitWidth * 23,
-        paddingRight: unitWidth * 23,
         alignItems: "center"
     },
     formArea: {

js/page/girlFrienfTerm.js

@@ -23,7 +23,7 @@ export default class GirlFrienfTerm extends React.Component {
                                 <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>年龄范围</Text>
                                 <AntDesign
                                     name={"right"}
-                                    size={24}
+                                    size={20}
                                     style={{ color: "#999999" }}
                                 />
                             </View>
@@ -43,7 +43,7 @@ export default class GirlFrienfTerm extends React.Component {
                                 <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>身高范围</Text>
                                 <AntDesign
                                     name={"right"}
-                                    size={24}
+                                    size={20}
                                     style={{ color: "#999999" }}
                                 />
                             </View>
@@ -63,7 +63,7 @@ export default class GirlFrienfTerm extends React.Component {
                                 <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>学历</Text>
                                 <AntDesign
                                     name={"right"}
-                                    size={24}
+                                    size={20}
                                     style={{ color: "#999999" }}
                                 />
                             </View>
@@ -83,7 +83,7 @@ export default class GirlFrienfTerm extends React.Component {
                                 <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>居住地</Text>
                                 <AntDesign
                                     name={"right"}
-                                    size={24}
+                                    size={20}
                                     style={{ color: "#999999" }}
                                 />
                             </View>
@@ -103,7 +103,7 @@ export default class GirlFrienfTerm extends React.Component {
                                 <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>年收入</Text>
                                 <AntDesign
                                     name={"right"}
-                                    size={24}
+                                    size={20}
                                     style={{ color: "#999999" }}
                                 />
                             </View>