kangaroo/js/page/userCard.js

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"
    }

})