kangaroo/js/page/GiftPay.js

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

export default class GiftPay extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.topInfo}>
                    <Text style={{ fontSize: unitWidth * 24, color: "#666666", marginTop: unitHeight * 20 }}>送个小礼物，敲开爱的大门，拉近彼此的距离</Text>
                    <View style={styles.giftInfo}>
                        <Image
                            source={require("../../static/gift.png")}
                            style={styles.giftImg}
                        />
                        <View style={styles.giftText}>
                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginBottom: unitHeight * 20 }}>礼物：告白玫瑰</Text>
                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>总价：¥6</Text>
                        </View>
                    </View>
                </View>
                <View style={styles.pay}>
                    <View style={styles.payTit}>
                        <AntDesign
                            name={"pay-circle1"}
                            size={24}
                            style={{ color: "#FA788A", marginRight: unitWidth * 12 }}
                        />
                        <Text style={{ color: "#666666", fontSize: unitWidth * 28 }}>请选择支付方式</Text>
                    </View>
                    <View style={styles.payList}>
                        <View style={styles.payItem}>
                            <AntDesign
                                name={"alipay-square"}
                                size={24}
                                style={{ color: "#108ee9", marginRight: unitWidth * 16 }}
                            />
                            <Text style={{ color: "#333333", fontSize: unitWidth * 28 }}>支付宝</Text>
                        </View>
                        <View style={styles.payItem}>
                            <FontAwesome
                                name={"weixin"}
                                size={24}
                                style={{ color: "#04BE02", marginRight: unitWidth * 16 }}
                            />
                            <Text style={{ color: "#333333", fontSize: unitWidth * 28 }}>微信</Text>
                        </View>

                    </View>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center"
    },
    topInfo: {
        width: "100%",
        flex: 1,
        backgroundColor: "#fff",
        paddingLeft: unitWidth * 24,
        marginBottom: unitHeight * 20
    },
    giftInfo: {
        flexDirection: "row",
        marginTop: unitHeight * 30
    },
    giftImg: {
        width: unitWidth * 80,
        height: unitHeight * 80,
        marginLeft:unitWidth * 20,
    },
    giftText: {
        marginLeft: unitWidth * 40
    },
    pay: {
        flex: 5,
        width: "100%",
        backgroundColor: "#fff"
    },
    payTit: {
        flexDirection: "row",
        alignItems: "center",
        marginTop: unitHeight * 35,
        marginLeft: unitHeight * 24
    },
    payList: {
        width: "100%",
        height: unitHeight * 76,
        paddingLeft: unitWidth * 73,
        paddingRight: unitWidth * 73,
        marginTop: unitHeight * 40,
        flexDirection: "row",
        justifyContent: "space-between"
    },
    payItem: {
        width: unitWidth * 250,
        height: unitHeight * 76,
        flexDirection: "row",
        borderColor: "#DEDEDE",
        borderWidth: 1,
        justifyContent: "center",
        alignItems: "center"

    }

})