我的礼物

js/navigator/AppNavigators.js

@@ -16,6 +16,7 @@ import UserAgree from "../page/UserAgree"
 import Suggestion from "../page/Suggestion"
 import Setting from "../page/Setting"
 import MyInfo from "../page/MyInfo"
+import MyGift from "../page/MyGift"
 
 const InitNavigator = createStackNavigator({
     LoginPage: {
@@ -32,6 +33,12 @@ const InitNavigator = createStackNavigator({
     }
 })
 const MainNavigator = createStackNavigator({
+    MyGift: {
+        screen: MyGift,
+        navigationOptions: {
+            headerTitle: "我的礼物"
+        }
+    },
     MyInfo: {
         screen: MyInfo,
         navigationOptions: {

js/page/GetGift.js

@@ -0,0 +1,98 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, Image } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+
+export default class GetGift 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,
+	}
+})

js/page/MyGift.js

@@ -0,0 +1,59 @@
+import React, { Component } from "react"
+import { StyleSheet } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+import { createMaterialTopTabNavigator } from "react-navigation-tabs"
+import { createAppContainer } from 'react-navigation';
+import GetGift from './GetGift'
+import SendGift from './SendGift'
+
+export default class MyGift extends Component {
+    _tabNavigator() {
+        return createAppContainer(
+            createMaterialTopTabNavigator(
+                {//在这里配置页面的路由
+                    GetGift: {
+                        screen: GetGift,
+                        navigationOptions: {
+                            tabBarLabel: '收到的礼物'
+                        }
+                    },
+                    SendGift: {
+                        screen: SendGift,
+                        navigationOptions: {
+                            tabBarLabel: '送出的礼物'
+                        }
+                    },
+                },
+                {
+                    tabBarOptions: {
+                        activeTintColor: 'white',//label和icon的前景色 活跃状态下（选中）
+                        inactiveTintColor: '#FFD1D1',//label和icon的前景色 活跃状态下（未选中）
+                        style: {
+                            backgroundColor: '#FB788A',//TabBar 的背景颜色
+                        },
+                        indicatorStyle: {
+                            height: 2,
+                            backgroundColor: '#fff',
+                        },//标签指示器的样式
+                        labelStyle: {
+                            fontSize: unitWidth * 28,
+                            // marginTop: unitHeight * 37,
+                            // marginBottom: unitHeight * 31,
+                        },//文字的样式
+                    },
+                }
+            )
+        )
+    }
+    render() {
+        const Tab = this._tabNavigator()
+        return <Tab />
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center"
+    }
+})

js/page/SendGift.js

@@ -0,0 +1,98 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, Image } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+
+export default class GetGift 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,
+	}
+})