用户名片，用户中心

js/component/Tips.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import { Text, View } from 'react-native'
+import PropTypes from 'prop-types'
+export default class Tips extends Component {
+    static defaultProps = {
+        bgColor: '#000',
+        fColor: '#fff',
+        borderColor: null,
+        borderWidth:null
+    };
+    static propTypes = {
+        //按钮宽度
+        width: PropTypes.string.isRequired,
+        //按钮高度
+        height: PropTypes.string.isRequired,
+        //按钮的圆度
+        borderRadius: PropTypes.string.isRequired,
+        //背景颜色
+        bgColor: PropTypes.string,
+        //字体颜色
+        fColor: PropTypes.string,
+        //文本
+        text: PropTypes.string.isRequired,
+    }
+    render() {
+        let { bgColor, fColor, text,  width, height, borderRadius,  borderColor, fSize } = this.props
+        return (
+                <View style={{
+                    width: width,
+                    height: height,
+                    backgroundColor: bgColor,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    borderRadius: borderRadius,
+                    borderWidth: 1,
+                    borderColor: borderColor
+                }}>
+                    <Text style={{
+                        color: fColor,
+                        fontSize:fSize
+                    }}
+                    >{text}</Text>
+                </View>
+        )
+    }
+}

js/navigator/AppNavigators.js

@@ -9,6 +9,7 @@ import Register3 from "../page/Register3"
 import Meet from "../page/Meet"
 import ForgetPassWord from "../page/ForgetPassWord"
 import HomePage from "../page/HomePage"
+import userCard from "../page/userCard"
 
 const InitNavigator = createStackNavigator({
     LoginPage:{
@@ -25,6 +26,12 @@ const InitNavigator = createStackNavigator({
     }
 })
 const MainNavigator = createStackNavigator({
+    userCard:{
+        screen:userCard,
+        navigationOptions:{
+            header:null
+        }
+    },
     HomePage:{
         screen:HomePage,
         navigationOptions:{

js/page/userCard.js

@@ -0,0 +1,519 @@
+import React from "react"
+import { StyleSheet, Text, View, Image, ScrollView } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+import Foundation from "react-native-vector-icons/Foundation"
+import FontAwesome5 from "react-native-vector-icons/FontAwesome5"
+import AntDesign from "react-native-vector-icons/AntDesign"
+import Tips from '../component/Tips'
+export default class userCard extends React.Component {
+    state = {
+        pageStatus: 1
+    };
+    render() {
+        return (
+            <ScrollView>
+                <View style={styles.container}>
+                    <View style={styles.topBgc}>
+                        <Image
+                            source={require("../../static/bannerBgc.png")}
+                            style={styles.bannerBgc}
+                        />
+                        <View style={styles.userPhoneArea}>
+                            <Image
+                                source={require("../../static/userPhone.png")}
+                                style={styles.userPhone}
+                            />
+                            <View style={styles.maleIconArea}>
+                                <Foundation
+                                    name={"male-symbol"}
+                                    size={16}
+                                    style={styles.maleIcon}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                    <View style={styles.userTit}>
+                        <View style={styles.titRow}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginRight: unitWidth * 28 }}>张晓明</Text>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>V3</Text>
+                        </View>
+                        <Text style={{ fontSize: unitWidth * 24, color: "#999999" }}>莱山区丨185cm丨55kg丨公务员丨15-20w丨本科</Text>
+                        <View style={styles.subtitRow}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>你和张晓明的匹配度：</Text>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#FA788A" }}>87%</Text>
+                        </View>
+                        <View style={styles.attestation}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>实名认证</Text>
+                            <View style={styles.attestationList}>
+                                <View style={styles.attestationItem}>
+                                    <FontAwesome5
+                                        name={"house-damage"}
+                                        size={36}
+                                        style={{ marginBottom: unitHeight * 24, color: "#DEDEDE" }}
+                                    />
+                                    <Text style={{ fontSize: unitWidth * 24, color: "#666666" }}>实名认证</Text>
+                                </View>
+                                <View style={styles.attestationItem}>
+                                    <FontAwesome5
+                                        name={"house-damage"}
+                                        size={36}
+                                        style={{ marginBottom: unitHeight * 24, color: "#DEDEDE" }}
+                                    />
+                                    <Text style={{ fontSize: unitWidth * 24, color: "#666666" }}>实名认证</Text>
+                                </View>
+                                <View style={styles.attestationItem}>
+                                    <FontAwesome5
+                                        name={"house-damage"}
+                                        size={36}
+                                        style={{ marginBottom: unitHeight * 24, color: "#DEDEDE" }}
+                                    />
+                                    <Text style={{ fontSize: unitWidth * 24, color: "#666666" }}>实名认证</Text>
+                                </View>
+                                <View style={styles.attestationItem}>
+                                    <FontAwesome5
+                                        name={"house-damage"}
+                                        size={36}
+                                        style={{ marginBottom: unitHeight * 24, color: "#DEDEDE" }}
+                                    />
+                                    <Text style={{ fontSize: unitWidth * 24, color: "#666666" }}>实名认证</Text>
+                                </View>
+                                <View style={styles.attestationItem}>
+                                    <FontAwesome5
+                                        name={"house-damage"}
+                                        size={36}
+                                        style={{ marginBottom: unitHeight * 24, color: "#DEDEDE" }}
+                                    />
+                                    <Text style={{ fontSize: unitWidth * 24, color: "#666666" }}>实名认证</Text>
+                                </View>
+
+                            </View>
+                        </View>
+                    </View>
+                    <View style={styles.hobby}>
+                        <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>
+                        </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>
+                        </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>
+                        </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>
+                        </View>
+                    </View>
+                    <View style={styles.chooseGirlFirend}>
+                        <Text style={styles.itemTitle}>择偶条件</Text>
+                        <View style={styles.friendList}>
+                            <Text style={styles.friendItem}>25-33岁</Text>
+                            <Text style={styles.friendItem}>155-175cm</Text>
+                            <Text style={styles.friendItem}>山东烟台</Text>
+                            <Text style={styles.friendItem}>大专</Text>
+                            <Text style={styles.friendItem}>未婚</Text>
+                        </View>
+                    </View>
+                    <View style={styles.questionAndAnswer}>
+                        <Text style={styles.itemTitle}>TA的问答</Text>
+                        <View style={styles.ansList}>
+                            <View style={styles.ansItem}>
+                                <Tips
+                                    width={unitWidth * 90}
+                                    height={unitHeight * 40}
+                                    borderRadius={unitHeight * 40}
+                                    bgColor="#FCF2F6"
+                                    borderColor="#FA788A"
+                                    fColor="#FA788A"
+                                    fSize={unitWidth * 28}
+                                    text="情感"
+                                />
+                                <View style={styles.ansitemRight}>
+                                    <Text style={styles.ansitemRightTit}>假如有人要给你介绍对象，你更在意？ </Text>
+                                    <Text style={styles.ansitemRightSubTit}>我的答案是：对方的颜值、穿衣品味</Text>
+                                </View>
+                            </View>
+                            <View style={styles.ansItem}>
+                                <Tips
+                                    width={unitWidth * 90}
+                                    height={unitHeight * 40}
+                                    borderRadius={unitHeight * 40}
+                                    bgColor="#FFEDE5"
+                                    borderColor="#FFC2A7"
+                                    fColor="#FFC2A7"
+                                    fSize={unitWidth * 28}
+                                    text="生活"
+                                />
+                                <View style={styles.ansitemRight}>
+                                    <Text style={styles.ansitemRightTit}>假如有人要给你介绍对象，你更在意？ </Text>
+                                    <Text style={styles.ansitemRightSubTit}>我的答案是：对方的颜值、穿衣品味</Text>
+                                </View>
+                            </View>
+                            <View style={styles.ansItem}>
+                                <Tips
+                                    width={unitWidth * 90}
+                                    height={unitHeight * 40}
+                                    borderRadius={unitHeight * 40}
+                                    bgColor="#F7F6FF"
+                                    borderColor="#D1C4FB"
+                                    fColor="#D1C4FB"
+                                    fSize={unitWidth * 28}
+                                    text="娱乐"
+                                />
+                                <View style={styles.ansitemRight}>
+                                    <Text style={styles.ansitemRightTit}>假如有人要给你介绍对象，你更在意？ </Text>
+                                    <Text style={styles.ansitemRightSubTit}>我的答案是：对方的颜值、穿衣品味</Text>
+                                </View>
+                            </View>
+                            <View style={styles.ansItem}>
+                                <Tips
+                                    width={unitWidth * 90}
+                                    height={unitHeight * 40}
+                                    borderRadius={unitHeight * 40}
+                                    bgColor="#FCF2F6"
+                                    borderColor="#FA788A"
+                                    fColor="#FA788A"
+                                    fSize={unitWidth * 28}
+                                    text="情感"
+                                />
+                                <View style={styles.ansitemRight}>
+                                    <Text style={styles.ansitemRightTit}>假如有人要给你介绍对象，你更在意？ </Text>
+                                    <Text style={styles.ansitemRightSubTit}>我的答案是：对方的颜值、穿衣品味</Text>
+                                </View>
+                            </View>
+
+
+                        </View>
+                        <AntDesign
+                            name={"down"}
+                            size={24}
+                            style={{ color: "#D4D4D4", alignSelf: "center", marginBottom: unitHeight * 30 }}
+                        />
+                    </View>
+                    <View style={styles.gift}>
+                        <Text style={styles.itemTitle}>TA的礼物</Text>
+                        <View style={styles.giftList}>
+                            <View style={styles.giftOnce}>
+                                <Image
+                                    source={require("../../static/gift.png")}
+                                    style={{ width: unitWidth * 90, height: unitHeight * 90 }}
+                                />
+                                <Text style={{ fontSize: unitWidth * 24, color: "#333333" }}>玫瑰 *21</Text>
+                            </View>
+                            <View style={styles.giftOnce}>
+                                <Image
+                                    source={require("../../static/gift.png")}
+                                    style={{ width: unitWidth * 90, height: unitHeight * 90 }}
+                                />
+                                <Text style={{ fontSize: unitWidth * 24, color: "#333333" }}>钻戒 *10</Text>
+                            </View>
+                        </View>
+                    </View>
+                    {
+                        this.state.pageStatus === 0 ? (<View style={styles.bottomtab}>
+                            <View style={styles.tabItem}>
+                                <AntDesign
+                                    name={"message1"}
+                                    size={30}
+                                    style={{ color: "#FA7B8D", marginRight: unitWidth * 20 }}
+                                />
+                                <Text style={{ color: "#333333", fontSize: unitWidth * 28 }}>心动</Text>
+                            </View>
+                            <View style={styles.tabItem}>
+                                <AntDesign
+                                    name={"message1"}
+                                    size={30}
+                                    style={{ color: "#FA7B8D", marginRight: unitWidth * 20 }}
+                                />
+                                <Text style={{ color: "#333333", fontSize: unitWidth * 28 }}>礼物</Text>
+                            </View>
+                            <View style={styles.tabItem}>
+                                <AntDesign
+                                    name={"message1"}
+                                    size={30}
+                                    style={{ color: "#FA7B8D", marginRight: unitWidth * 20 }}
+                                />
+                                <Text style={{ color: "#333333", fontSize: unitWidth * 28 }}>聊天</Text>
+                            </View>
+
+                        </View>
+                        ) : null
+                    }
+
+                </View>
+            </ScrollView>
+
+        )
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: "flex-end",
+        backgroundColor: "#eee"
+    },
+    bannerBgc: {
+        width: "100%",
+        height: unitHeight * 540
+    },
+    topBgc: {
+        width: "100%",
+        height: unitHeight * 540,
+        position: "relative",
+        zIndex: 999
+    },
+    userPhoneArea: {
+        position: "absolute",
+        right: unitWidth * 25,
+        bottom: unitHeight * -77,
+    },
+    userPhone: {
+        width: unitWidth * 154,
+        height: unitWidth * 154,
+        borderRadius: unitHeight * 154
+    },
+    maleIconArea: {
+        width: unitWidth * 28,
+        height: unitWidth * 28,
+        backgroundColor: "#75C4EF",
+        borderRadius: unitHeight * 28,
+        position: "absolute",
+        bottom: 0,
+        left: "50%",
+        marginBottom: unitHeight * -10,
+        transform: [{ translateX: unitWidth * -14 }]
+    },
+    maleIcon: {
+        color: "#fff",
+        marginLeft: unitWidth * 5
+    },
+    userTit: {
+        width: "100%",
+        paddingLeft: unitWidth * 24,
+        paddingRight: unitWidth * 24,
+        backgroundColor: "#fff",
+        paddingBottom: unitHeight * 30
+    },
+    titRow: {
+        flexDirection: "row",
+        marginTop: unitHeight * 26,
+        marginBottom: unitHeight * 28
+    },
+    subtitRow: {
+        flexDirection: "row",
+        marginTop: unitHeight * 30,
+        marginBottom: unitHeight * 60
+    },
+    attestationList: {
+        marginTop: unitHeight * 36,
+        flexDirection: "row",
+        justifyContent: "space-between"
+    },
+    attestationItem: {
+        width: unitHeight * 94,
+        alignItems: "center"
+    },
+    hobby: {
+        width: "100%",
+        height: unitHeight * 334,
+        backgroundColor: "#fff",
+        marginTop: unitHeight * 10,
+        paddingTop: unitHeight * 30
+    },
+    itemTitle: {
+        fontSize: unitWidth * 28,
+        color: "#333333",
+        marginLeft: unitWidth * 24
+    },
+
+    itemList: {
+        flexDirection: "row",
+        marginTop: unitHeight * 20,
+        alignItems: "center",
+        justifyContent: "flex-start",
+        marginLeft: unitWidth * 40
+    },
+    itemListCenter: {
+        width: unitWidth * 370,
+        flexDirection: "row",
+        justifyContent: "flex-start"
+    },
+    itemListCOnce: {
+        height: unitHeight * 42,
+        borderRadius: unitHeight * 28,
+        justifyContent: "center",
+        alignItems: "center",
+        borderWidth: unitWidth * 1,
+        borderColor: "#FFD1D1",
+        width: unitWidth * 108,
+        marginRight: unitWidth * 20,
+        backgroundColor: "#FCF2F6"
+    },
+    itemListOnceText: {
+        fontSize: unitWidth * 24,
+        color: "#666666"
+    },
+    chooseGirlFirend: {
+        width: "100%",
+        height: unitHeight * 140,
+        backgroundColor: "#fff",
+        marginTop: unitHeight * 10,
+        paddingTop: unitHeight * 30
+    },
+    friendList: {
+        flexDirection: "row",
+        marginTop: unitHeight * 20,
+        alignItems: "center",
+        justifyContent: "flex-start",
+        marginLeft: unitWidth * 40
+    },
+    friendItem: {
+        marginRight: unitWidth * 30,
+        fontSize: unitWidth * 24,
+        color: "#666666"
+    },
+    questionAndAnswer: {
+        width: "100%",
+        backgroundColor: "#fff",
+        marginTop: unitHeight * 10,
+        paddingTop: unitHeight * 30,
+        marginBottom: unitHeight * 10
+    },
+    ansList: {
+        marginTop: unitHeight * 30,
+        paddingLeft: unitWidth * 45,
+    },
+    ansItem: {
+        flexDirection: "row",
+        marginBottom: unitHeight * 30
+    },
+    ansitemRight: {
+        marginLeft: unitWidth * 40
+    },
+    ansitemRightTit: {
+        fontSize: unitWidth * 28,
+        color: "#333333",
+        marginBottom: unitHeight * 20
+    },
+    ansitemRightSubTit: {
+        fontSize: unitWidth * 24,
+        color: "#999999"
+    },
+    gift: {
+        width: "100%",
+        paddingTop: unitHeight * 21,
+        backgroundColor: "#fff"
+    },
+    giftList: {
+        width: "100%",
+        height: unitHeight * 215,
+        marginTop: unitHeight * 47,
+        paddingLeft: unitWidth * 50,
+        flexDirection: "row"
+    },
+    giftOnce: {
+        width: unitWidth * 100,
+        height: unitHeight * 163,
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginRight: unitWidth * 70
+    },
+    bottomtab: {
+        width: "100%",
+        paddingLeft: unitWidth * 60,
+        paddingRight: unitWidth * 60,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        backgroundColor: "#fff",
+        paddingBottom: unitHeight * 25,
+    },
+    tabItem: {
+        flexDirection: "row",
+        alignItems: "center"
+    }
+
+})