kangaroo/js/page/meet.js

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

export default class Meet extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.photoArea}>
                    <View style={styles.photoRow}>
                        <View style={styles.photoItem}>
                            <Image
                                source={require("../../static/userPhone.png")}
                                style={styles.userPhone}
                            />
                            <View style={styles.userPhoneText}>
                                <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
                            </View>
                        </View>
                        <View style={styles.photoItem}>
                            <Image
                                source={require("../../static/userPhone.png")}
                                style={styles.userPhone}
                            />
                            <View style={styles.userPhoneText}>
                                <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
                            </View>
                        </View>
                    </View>
                    <View style={styles.photoCenterRow}>
                        <View style={styles.photoCenterCul}>
                            <View style={styles.photoItem}>
                                <Image
                                    source={require("../../static/userPhone.png")}
                                    style={styles.userPhone}
                                />
                                <View style={styles.userPhoneText}>
                                    <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
                                </View>
                            </View>
                            <View style={styles.photoItem}>
                                <Image
                                    source={require("../../static/userPhone.png")}
                                    style={styles.userPhone}
                                />
                                <View style={styles.userPhoneText}>
                                    <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
                                </View>
                            </View>
                        </View>
                        <View style={styles.photoCenter}>
                            <Image
                                source={require("../../static/userPhone.png")}
                                style={styles.userCenterPhone}
                            />
                            <View style={styles.userCenterText}>
                                <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
                            </View>
                        </View>
                        <View style={styles.photoCenterCul}>
                            <View style={styles.photoItem}>
                                <Image
                                    source={require("../../static/userPhone.png")}
                                    style={styles.userPhone}
                                />
                                <View style={styles.userPhoneText}>
                                    <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
                                </View>
                            </View>

                            <View style={styles.photoItem}>
                                <Image
                                    source={require("../../static/userPhone.png")}
                                    style={styles.userPhone}
                                />
                                <View style={styles.userPhoneText}>
                                    <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                    <View style={styles.photoRow}>
                        <View style={styles.photoItem}>
                            <Image
                                source={require("../../static/userPhone.png")}
                                style={styles.userPhone}
                            />
                            <View style={styles.userPhoneText}>
                                <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
                            </View>
                        </View>
                        <View style={styles.photoItem}>
                            <Image
                                source={require("../../static/userPhone.png")}
                                style={styles.userPhone}
                            />
                            <View style={styles.userPhoneText}>
                                <Text style={{ color: "#fff", fontSize: unitWidth * 24 }}>90%</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.bottomBtn}>
                    <MyButtom
                        text={"换一批"}
                        width={unitWidth * 270}
                        height={unitHeight * 74}
                        borderRadius={unitHeight * 74}
                        bgColor="#FA788A"
                        shadowBgc="rgba(250,120,138,1)"
                        style={{ fontSize: unitWidth * 28 }}
                    />
                    <MyButtom
                        text={"换题目"}
                        width={unitWidth * 270}
                        height={unitHeight * 74}
                        borderRadius={unitHeight * 74}
                        bgColor="#fff"
                        shadowBgc="#fff"
                        borderColor="#FA788A"
                        borderWidth={1}
                        style={{ fontSize: unitWidth * 28, color: "#FA788A" }}
                    />
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: getStatusBarHeight() + unitHeight * 38,
        alignItems: "center"
    },
    photoArea: {
        height: unitHeight * 714,
        width: "100%"
    },
    photoRow: {
        width: "100%",
        height: unitHeight * 133,
        flexDirection: "row",
        justifyContent: "space-between",
        paddingLeft: unitWidth * 206,
        paddingRight: unitWidth * 206
    },
    photoCenterRow: {
        width: "100%",
        height: unitHeight * 340,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingLeft: unitWidth * 55,
        paddingRight: unitWidth * 55
    },
    photoCenterCul: {
        width: unitWidth * 133,
        height: "100%",
        justifyContent: "space-between"
    },
    photoCenter: {
        height: unitHeight * 187,
        width: unitWidth * 167,
        alignItems: "center"
    },
    userCenterPhone: {
        height: unitWidth * 167,
        width: unitWidth * 167,
        borderRadius: unitHeight * 167,
    },
    userCenterText: {
        width: unitWidth * 100,
        height: unitHeight * 40,
        backgroundColor: "#FA788A",
        marginTop: unitHeight * -20,
        borderRadius: unitHeight * 40,
        justifyContent: "center",
        alignItems: "center"
    },
    photoItem: {
        width: unitWidth * 133,
        height: unitHeight * 151,
        alignItems: "center"
    },
    userPhone: {
        width: unitWidth * 133,
        height: unitWidth * 133,
        borderRadius: unitWidth * 133
    },
    userPhoneText: {
        width: unitWidth * 90,
        height: unitHeight * 36,
        backgroundColor: "#FA788A",
        borderRadius: unitHeight * 36,
        marginTop: unitHeight * -18,
        justifyContent: "center",
        alignItems: "center"
    },
    bottomBtn: {
        width: "100%",
        marginTop: unitHeight * 94,
        height: unitHeight * 74,
        flexDirection: "row",
        justifyContent: "space-between",
        paddingLeft: unitWidth * 65,
        paddingRight: unitWidth * 65
    }

})