kangaroo/js/page/Attestation/IdIcon.js

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

export default class IdIcon extends Component {

    render() {
        let { IconList } = this.props
        return (
            <View style={styles.iconArea}>
                {
                    IconList.map(item => {
                        return (
                            <View style={styles.iconItem}>
                                <ImageBackground source={require('../../../static/idCard.png')}
                                    style={styles.icon}
                                >
                                    <AntDesign
                                        name={"pluscircleo"}
                                        size={45}
                                        style={{ color: "#fff" }}
                                    />
                                </ImageBackground>
                                <Text style={{ color: "#333333", fontSize: unitWidth * 24 }}>{item}</Text>
                            </View>
                        )
                    })
                }

            </View>
        )
    }
}
const styles = StyleSheet.create({
    iconArea: {
        width: "100%",
        height: unitHeight * 280,
        flexDirection: "row",
        justifyContent: "space-around",
        paddingLeft: unitWidth * 20,
        paddingRight: unitWidth * 20
    },
    iconItem: {
        flex: 1,
        height: unitHeight * 280,
        borderStyle: "dashed",
        borderWidth: 1,
        borderColor: "#ccc",
        alignItems: "center",
        justifyContent: "space-between",
        paddingTop: unitHeight * 57,
        paddingBottom: unitHeight * 20,
        marginLeft: unitWidth * 10,
        marginRight: unitWidth * 10
    },
    icon: {
        width: unitWidth * 264,
        height: unitWidth * 157,
        backgroundColor: "#FB7E90",
        justifyContent: "center",
        alignItems: "center",
    }
})