kangaroo/js/page/SendGift.js

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

export default class SendGift extends Component {

	render() {
		return (
			<View style={styles.container}>
				<View style={styles.giftList}>
					<View style={styles.itemOnce}>
						<View style={styles.itemOnceTit}>
							<View style={styles.itemOnceUser}>
								<Image
									source={require("../../static/userPhone.png")}
									style={styles.userImg}
								/>
								<Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>王先生</Text>
							</View>
							<Text style={{ fontSize: unitWidth * 24, color: "#666666" }}>12-03 13：15</Text>
						</View>
						<View style={styles.itemGiftInfo}>
							<View style={{ flexDirection: "row" }}>
								<Image
									source={require("../../static/gift.png")}
									style={styles.giftImg}
								/>
								<View>
									<Text style={{ fontSize: unitWidth * 28, color: "#333333", marginBottom: unitHeight * 30 }}>告白玫瑰</Text>
									<Text style={{ fontSize: unitWidth * 28, color: "#EDB031" }}>￥6</Text>
								</View>
							</View>
							<View style={{ flexDirection: "row" }}>
								<Image
									source={require("../../static/gift.png")}
									style={{ width: unitWidth * 40, height: unitHeight * 38, marginLeft: unitWidth * 40 }}
								/>
								<Image
									source={require("../../static/userPhone.png")}
									style={{ width: unitWidth * 40, height: unitHeight * 38, marginLeft: unitWidth * 40 }}
								/>
							</View>
						</View>
					</View>
				</View>
			</View>
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: "center",
		alignItems: "center",
		backgroundColor: "#fff",
		paddingTop:unitHeight * 48,
	},
	giftList: {
		width: "100%",
		height: "100%",
		paddingLeft: unitWidth * 24,
		paddingRight: unitWidth * 24
	},
	itemOnce: {
		width: "100%",
	},
	itemOnceTit: {
		width: "100%",
		flexDirection: "row",
		justifyContent: "space-between",
		alignItems: "center"
	},
	itemOnceUser: {
		flexDirection: "row",
		alignItems: "center"
	},
	userImg: {
		width: unitWidth * 80,
		height: unitHeight * 80,
		marginRight: unitWidth * 28
	},
	itemGiftInfo: {
		width: unitWidth * 594,
		height: unitHeight * 130,
		backgroundColor: "#F9F9F9",
		alignSelf: "flex-end",
		flexDirection: "row",
		justifyContent: "space-between",
		alignItems: "center",
		paddingRight: unitWidth * 22
	},
	giftImg: {
		width: unitWidth * 80,
		height: unitHeight * 80,
		marginLeft: unitWidth * 24,
		marginRight: unitWidth * 20,
	}
})