kangaroo/js/page/RecommendGamer.js

import React, { Component } from "react"
import { StyleSheet, Text, View, Image } from "react-native"
import { unitWidth, unitHeight } from "../utils/AdapterUtil";
import FontAwesome from "react-native-vector-icons/FontAwesome"
import MyButtom from '../component/MyButton'

export default class RecommendGamer extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.gamerList}>
                    <View style={styles.itemArea}>
                        <View style={styles.itemTop}>
                            <Image
                                source={require("../../static/bannerBgc.png")}
                                style={styles.phone}
                            />
                            <View style={styles.userInfo}>
                                <View style={styles.userTit}>
                                    <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>萱萱</Text>
                                    <Text>{"<500m"}</Text>
                                </View>
                                <Text style={{ fontSize: unitWidth * 24, color: "#333333" }}>26岁/163/本科/7000-10000</Text>
                                <View style={styles.userTips}>
                                    <View style={styles.tipsOnce}>
                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>身材苗条</Text>
                                    </View>
                                    <View style={styles.tipsOnce}>
                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>文艺</Text>
                                    </View>
                                    <View style={styles.tipsOnce}>
                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>旅行</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View style={styles.itemBottom}>
                            <View style={styles.itemBottomLeft}>
                                <FontAwesome
                                    name={"heartbeat"}
                                    size={20}
                                    style={{ color: "#FB788A" }}
                                />
                                <Text style={{ color: "#999999", fontSize: unitWidth * 24, marginLeft: unitWidth * 10 }}>魅力值：90</Text>
                            </View>
                            <View style={styles.itemBottomRight}>
                                <MyButtom
                                    text={"查看关卡"}
                                    width={unitWidth * 144}
                                    height={unitHeight * 58}
                                    borderRadius={unitHeight * 10}
                                    bgColor="#fff"
                                    borderColor="#FA788A"
                                    borderWidth={1}
                                    shadowBgc="#fff"
                                    style={{ fontSize: unitWidth * 28, color: "#FA788A" }}
                                />
                                <MyButtom
                                    text={"开始闯关"}
                                    width={unitWidth * 144}
                                    height={unitHeight * 58}
                                    borderRadius={unitHeight * 10}
                                    bgColor="#FF4A6C"
                                    borderColor="#FF4A6C"
                                    borderWidth={1}
                                    shadowBgc="#FB788A"
                                    style={{ fontSize: unitWidth * 28, color: "#fff" }}
                                />
                            </View>
                        </View>
                    </View>
                    <View style={styles.itemArea}>
                        <View style={styles.itemTop}>
                            <Image
                                source={require("../../static/bannerBgc.png")}
                                style={styles.phone}
                            />
                            <View style={styles.userInfo}>
                                <View style={styles.userTit}>
                                    <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>萱萱</Text>
                                    <Text>{"<500m"}</Text>
                                </View>
                                <Text style={{ fontSize: unitWidth * 24, color: "#333333" }}>26岁/163/本科/7000-10000</Text>
                                <View style={styles.userTips}>
                                    <View style={styles.tipsOnce}>
                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>身材苗条</Text>
                                    </View>
                                    <View style={styles.tipsOnce}>
                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>文艺</Text>
                                    </View>
                                    <View style={styles.tipsOnce}>
                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>旅行</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View style={styles.itemBottom}>
                            <View style={styles.itemBottomLeft}>
                                <FontAwesome
                                    name={"heartbeat"}
                                    size={20}
                                    style={{ color: "#FB788A" }}
                                />
                                <Text style={{ color: "#999999", fontSize: unitWidth * 24, marginLeft: unitWidth * 10 }}>魅力值：90</Text>
                            </View>
                            <View style={styles.itemBottomRight}>
                                <MyButtom
                                    text={"查看关卡"}
                                    width={unitWidth * 144}
                                    height={unitHeight * 58}
                                    borderRadius={unitHeight * 10}
                                    bgColor="#fff"
                                    borderColor="#FA788A"
                                    borderWidth={1}
                                    shadowBgc="#fff"
                                    style={{ fontSize: unitWidth * 28, color: "#FA788A" }}
                                />
                                <MyButtom
                                    text={"开始闯关"}
                                    width={unitWidth * 144}
                                    height={unitHeight * 58}
                                    borderRadius={unitHeight * 10}
                                    bgColor="#FF4A6C"
                                    borderColor="#FF4A6C"
                                    borderWidth={1}
                                    shadowBgc="#FB788A"
                                    style={{ fontSize: unitWidth * 28, color: "#fff" }}
                                />
                            </View>
                        </View>
                    </View>
                
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        paddingLeft: unitWidth * 23,
        paddingRight: unitWidth * 23,
        paddingTop: unitHeight * 57
    },
    gamerList: {
        width: "100%"
    },
    itemArea: {
        width: unitWidth * 702,
        height: unitHeight * 308,
        backgroundColor: "#F9F9F9",
        borderRadius: unitHeight * 10,
        paddingTop: unitHeight * 20,
        marginBottom:unitHeight * 30,
        paddingLeft:unitWidth * 20
    },
    itemTop: {
        flexDirection: "row"
    },
    phone: {
        flex: 1,
        height: unitHeight * 180
    },
    userInfo: {
        flex: 2,
        paddingLeft: unitWidth * 20,
        paddingRight: unitWidth * 20
    },
    userTit: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: unitHeight * 30
    },
    userTips: {
        flexDirection: "row",
        marginTop: unitHeight * 25
    },
    tipsOnce: {
        height: unitHeight * 42,
        backgroundColor: "#FCF2F6",
        borderRadius: unitHeight * 42,
        justifyContent: "center",
        alignItems: "center",
        paddingLeft: unitWidth * 20,
        paddingRight: unitWidth * 20,
        marginLeft: unitWidth * 10,
        marginRight: unitWidth * 10
    },
    itemBottom: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginTop: unitHeight * 30,
        paddingLeft: unitWidth * 20,
        paddingRight: unitWidth * 20
    },
    itemBottomLeft: {
        flexDirection: "row",
    },
    itemBottomRight: {
        flexDirection: "row",
        width: unitWidth * 320,
        justifyContent: "space-between"
    }
})