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}>
				<TouchableOpacity onPress={() => this.props.nav('Buy')}>
					<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>
				</TouchableOpacity>
			</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}
						style={{ height: '80%', width: '95%', borderRadius: 10 }}
					/>
				</View>
			</View>
		);
	}
}