efunbox-mobile-8/pages/components/ShopBox.js

/** 
 * @param: 
 *      data: 商品列表
 *      discount: 优惠信息
 */

import React, { Component } from "react";
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ImageBackground,
} from "react-native";
import Dimensions from '../utils/dimensions'

const styles = StyleSheet.create({
    bigWrapper: {
        flexDirection: 'column',
    },
    wrapper: {
        // width: Dimensions.width,
        // height: 45,
        justifyContent: "center",
        flexDirection: 'row',
        justifyContent: 'space-around',
        paddingHorizontal: 7
    },
    item: {
        width: Dimensions.width * 168 / 375,
        height: Dimensions.width * 168 / 375 * 120 / 168,
        paddingLeft: 10
    },
    title: {
        fontSize: 20,
        color: '#fff',
        marginTop: 15,
    },
    line2: {
        flexDirection: 'row',
        alignItems: 'center',
        // marginTop: 3
    },
    price: {
        fontSize: 24,
        color: '#fff',
        fontWeight: 'bold',
        marginRight: 5
    },
    originPrice: {
        fontSize: 11,
        color: '#fff',
        textDecorationLine: 'line-through'
    },
    line3: {
        alignItems: 'center',
        flexDirection: 'row',
        marginTop: 8
    },
    buy: {
        fontSize: 18,
        color: '#fff'
    },
    discount: {
        width: Dimensions.width,
        alignItems: 'center',
        justifyContent: 'center',
        height: 100
    },
    discountIcon: {
        width: Dimensions.width * 343 / 375,
        height: Dimensions.width * 343 / 375 * 80 / 343
    }

})

export default class ShopBox extends Component {

    renderGoods = (item, index) => {
        return (
            <ImageBackground
                source={item.background}
                style={styles.item}
                key={index}
            >
                <Text
                    style={styles.title}
                >{item.title}</Text>
                <View
                    style={styles.line2}
                >
                    <Text style={styles.price}>￥{item.price}</Text>
                    <Text style={styles.originPrice}>原价: {item.originPrice}</Text>
                </View>
                <View
                    style={styles.line3}
                >
                    <Text style={styles.buy}>立即购买</Text>
                    <Image
                        source={require('../images/shopBox/arrow.png')}
                        style={styles.arrow}
                    />

                </View>
            </ImageBackground>
        )
    }

    render() {

        return (
            <View style={styles.bigWrapper}>
                <View style={styles.wrapper}>
                    {this.props.data.map((item, index) => this.renderGoods(item, index))}
                </View>
                <View style={styles.discount}>
                    <Image
                        source={this.props.discount.icon}
                        stytle={styles.discountIcon}
                    />
                </View>

            </View>

        );
    }
}