kangaroo/js/page/PassMode1.js

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

export default class PassMode1 extends Component {
    toPassmode = () => {
        const { navigation } = this.props;
        navigation.navigate("PassMode")
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.topArea}>
                    <View style={styles.tit}>
                        <Text style={styles.titText}>第一关</Text>
                    </View>
                    <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人</Text>
                </View>
                <View style={styles.btnList}>
                    <View style={styles.btnItem}>
                        <View style={styles.btnItemLeft}>
                            <Text style={{ fontSize: unitWidth * 60, color: "#FFE1EE" }}>A</Text>
                        </View>
                        <View style={styles.btnItemRight}>
                            <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</Text>
                        </View>
                    </View>
                    <TouchableOpacity onPress={this.toPassmode}>
                        <View style={styles.btnItemRed}>
                            <View style={styles.btnItemLeft}>
                                <Text style={{ fontSize: unitWidth * 60, color: "#FFE1EE" }}>B</Text>
                            </View>
                            <View style={styles.btnItemRight}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                    <View style={styles.btnItem}>
                        <View style={styles.btnItemLeft}>
                            <Text style={{ fontSize: unitWidth * 60, color: "#FFE1EE" }}>C</Text>
                        </View>
                        <View style={styles.btnItemRight}>
                            <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</Text>
                        </View>
                    </View>
                    <View style={styles.btnItem}>
                        <View style={styles.btnItemLeft}>
                            <Text style={{ fontSize: unitWidth * 60, color: "#FFE1EE" }}>D</Text>
                        </View>
                        <View style={styles.btnItemRight}>
                            <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</Text>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center"
    },
    topArea: {
        width: "100%",
        paddingLeft: unitWidth * 24,
        paddingRight: unitWidth * 24,
        paddingTop: unitHeight * 20,
    },
    tit: {
        borderLeftWidth: unitWidth * 4,
        borderColor: "#FA788A",
        paddingLeft: unitWidth * 12,
        justifyContent: "center",
        marginBottom: unitHeight * 47
    },
    titText: {
        fontSize: unitWidth * 28,
        color: "#333333",
        fontWeight: "bold"
    },
    btnList: {
        paddingLeft: unitWidth * 30,
        marginTop: unitHeight * 60,
        width: "100%"
    },
    btnItem: {
        width: unitWidth * 642,
        height: unitHeight * 80,
        backgroundColor: "#F2F2F2",
        marginBottom: unitHeight * 30,
        borderRadius: unitHeight * 80,
        flexDirection: "row",
        alignItems: "center",
        borderWidth: 1,
        borderColor: "#ccc"
    },
    btnItemLeft: {
        flex: 1,
        height: "100%",
        justifyContent: "center",
        alignItems: "center",
        borderRightWidth: 1,
        borderRightColor: "#FFD1D1"
    },
    btnItemRight: {
        flex: 4,
        paddingLeft: unitWidth * 23,
        paddingRight: unitWidth * 23
    },
    btnItemRed: {
        width: unitWidth * 642,
        height: unitHeight * 80,
        backgroundColor: "#FB788A",
        marginBottom: unitHeight * 30,
        borderRadius: unitHeight * 80,
        flexDirection: "row",
        alignItems: "center",
        borderWidth: 1,
        borderColor: "#FF4A6C"
    }
})