kangaroo/js/page/Attestation/Icon.js

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

export default class Icon extends Component {

    render() {
        let { text } = this.props
        return (
            <View style={styles.iconArea}>
                <View style={styles.iconItem}>
                    <View style={styles.icon}>
                        <AntDesign
                            name={"camera"}
                            size={45}
                            style={{ color: "#fff" }}
                        />
                    </View>
        <Text style={{ color: "#333333", fontSize: unitWidth * 24 }}>{text}</Text>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    iconArea: {
        width: "100%",
        height: unitHeight * 280,
        flexDirection: "row",
        justifyContent: "space-around"
    },
    iconItem: {
        width: unitWidth * 590,
        height: unitHeight * 280,
        borderStyle: "dashed",
        borderWidth: 1,
        borderColor:"#ccc",
        alignItems: "center",
        justifyContent: "space-between",
        paddingTop: unitHeight * 57,
        paddingBottom: unitHeight * 20,
    },
    icon: {
        width: unitWidth * 118,
        height: unitWidth * 118,
        backgroundColor: "#FB7E90",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: unitWidth * 118
    }
})