kangaroo/js/page/GamerList.js

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

export default class GamerList extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.gamerList}>
                    <View style={styles.item}>
                        <View style={styles.itemTit}>
                            <Ionicons
                                name={"ios-radio-button-on"}
                                size={16}
                                style={{ color: "#FF4A6C" }}
                            />
                            <Text style={{ fontSize: unitWidth * 28, color: "#fff", marginLeft: unitWidth * 20 }}>第一关</Text>
                        </View>
                        <Text style={{ fontSize: unitWidth * 24, color: "#fff", lineHeight: unitHeight * 30 }}>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</Text>
                    </View>
                    <View style={styles.item}>
                        <View style={styles.itemTit}>
                            <Ionicons
                                name={"ios-radio-button-on"}
                                size={16}
                                style={{ color: "#FF4A6C" }}
                            />
                            <Text style={{ fontSize: unitWidth * 28, color: "#fff", marginLeft: unitWidth * 20 }}>第二关</Text>
                        </View>
                        <Text style={{ fontSize: unitWidth * 24, color: "#fff", lineHeight: unitHeight * 30 }}>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</Text>
                    </View>
                    <View style={styles.item}>
                        <View style={styles.itemTit}>
                            <Ionicons
                                name={"ios-radio-button-on"}
                                size={16}
                                style={{ color: "#FF4A6C" }}
                            />
                            <Text style={{ fontSize: unitWidth * 28, color: "#fff", marginLeft: unitWidth * 20 }}>第三关</Text>
                        </View>
                        <Text style={{ fontSize: unitWidth * 24, color: "#fff", lineHeight: unitHeight * 30 }}>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</Text>
                    </View>

                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        // justifyContent: "center",
        alignItems: "center",
        paddingLeft: unitWidth * 25,
        paddingRight: unitWidth * 25,
        paddingTop: unitHeight * 50
    },
    gamerList: {
        width: "100%",
    },
    item: {
        width: "100%",
        height: unitHeight * 214,
        backgroundColor: "#FFB29D",
        borderRadius: unitHeight * 10,
        paddingTop: unitHeight * 37,
        paddingLeft: unitWidth * 20,
        paddingRight: unitWidth * 20,
        marginBottom: unitHeight * 50
    },
    itemTit: {
        flexDirection: "row",
        marginBottom: unitHeight * 40
    }
})