kangaroo/js/page/GameHome.js

import React, { Component } from "react"
import { StyleSheet, Text, View, Image, ImageBackground, ScrollView } from "react-native"
import { unitWidth, unitHeight } from "../utils/AdapterUtil";
import Ionicons from "react-native-vector-icons/Ionicons"
import FontAwesome5 from "react-native-vector-icons/FontAwesome5"

export default class GameHome extends Component {

    render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    <Image
                        source={require("../../static/bannerBgc.png")}
                        style={styles.bannerBgc}
                    />
                    <View style={styles.centerTab}>
                        <ImageBackground source={require('../../static/tabBgc1.png')}
                            style={styles.tabBgc}
                        >
                            <Text style={styles.tabText}>闯关游戏</Text>
                        </ImageBackground>
                        <ImageBackground source={require('../../static/tabBgc2.png')}
                            style={styles.tabBgc}
                        >
                            <Text style={styles.tabText}>谁是卧底</Text>
                        </ImageBackground>
                    </View>
                    <View style={styles.cardList}>
                        <View style={styles.cardItem}>
                            <View style={styles.cardTit}>
                                <Ionicons
                                    name={"ios-radio-button-on"}
                                    size={20}
                                    style={{ color: "#FB788A" }}
                                />
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>推荐关卡</Text>
                            </View>
                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginBottom: unitHeight * 24 }}>关卡关卡关卡关卡关卡关卡关卡关卡关卡关卡关卡关卡关卡</Text>
                            <Image
                                source={require("../../static/bannerBgc.png")}
                                style={styles.cardBgc}
                            />
                            <View style={styles.cardBottom}>
                                <View style={styles.cardBottomItem}>
                                    <FontAwesome5
                                        name={"crown"}
                                        size={20}
                                        style={{ color: "orange" }}
                                    />
                                    <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>关主：明明</Text>
                                </View>
                                <View style={styles.cardBottomItem}>
                                    <FontAwesome5
                                        name={"heartbeat"}
                                        size={20}
                                        style={{ color: "#FB788A" }}
                                    />
                                    <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>魅力值：90</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
            </ScrollView>

        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        paddingLeft: unitWidth * 23,
        paddingRight: unitWidth * 23
    },
    bannerBgc: {
        height: unitHeight * 300,
        width: "100%",
        marginTop: unitHeight * 10
    },
    centerTab: {
        width: "100%",
        height: unitHeight * 200,
        marginTop: unitHeight * 30,
        marginBottom: unitHeight * 30,
        flexDirection: "row",
        justifyContent: "space-between"
    },
    tabBgc: {
        width: unitWidth * 342,
        height: unitHeight * 200,
        justifyContent: "center",
        paddingLeft: unitWidth * 42,
    },
    tabText: {
        fontSize: unitWidth * 32,
        color: "#FFFFFF",
        fontWeight: "bold"
    },
    cardList: {
        width: "100%"
    },
    cardItem: {
        width: "100%",
        height: unitHeight * 880
    },
    cardTit: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: unitHeight * 23
    },
    cardBgc: {
        width: "100%",
        height: unitHeight * 650,
        borderRadius: unitHeight * 20
    },
    cardBottom: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingLeft: unitWidth * 30,
        paddingRight: unitWidth * 30,
        marginTop: unitHeight * 30
    },
    cardBottomItem: {
        flexDirection: "row",
        alignItems: "center"
    }
})