闯关模式

js/navigator/AppNavigators.js

@@ -20,6 +20,8 @@ import MyGift from "../page/MyGift"
 import Attestation from "../page/Attestation/Attestation"
 import WaitAttestation from "../page/WaitAttestation"
 import AttestationInfo from "../page/AttestationInfo"
+import PassMode from "../page/PassMode"
+import PassMode1 from "../page/PassMode1"
 
 const InitNavigator = createStackNavigator({
     LoginPage: {
@@ -36,6 +38,18 @@ const InitNavigator = createStackNavigator({
     }
 })
 const MainNavigator = createStackNavigator({
+    PassMode1: {
+        screen: PassMode1,
+        navigationOptions: {
+            headerTitle: "闯关模式"
+        }
+    },
+    PassMode: {
+        screen: PassMode,
+        navigationOptions: {
+            headerTitle: "闯关模式"
+        }
+    },
     Attestation: {
         screen: Attestation,
         navigationOptions: {

js/page/PassMode.js

@@ -0,0 +1,68 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, Image } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+
+export default class PassMode extends Component {
+	render() {
+		return (
+			<View style={styles.container}>
+				<View style={{ alignItems: "center", marginBottom: unitHeight * 60 }}>
+					<Image
+						source={require("../../static/passSuccess.png")}
+						style={styles.topIcon}
+					/>
+					<Text style={{ fontSize: unitWidth * 28, color: "#FA788A", marginBottom: unitHeight * 10 }}>恭喜您闯关成功！</Text>
+					<Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>请选择您想要获得的奖励吧~</Text>
+				</View>
+				<View style={styles.btnList}>
+					<View style={styles.btnItem}>
+						<Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>获得关主的手机号</Text>
+					</View>
+					<View style={styles.btnItemRed}>
+						<Text style={{ fontSize: unitWidth * 28, color: "#fff" }}>查看关主的生活照</Text>
+					</View>
+					<View style={styles.btnItem}>
+						<Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>和关主一起玩推理游戏</Text>
+					</View>
+					<View style={styles.btnItem}>
+						<Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>自定义</Text>
+					</View>
+				</View>
+			</View>
+		)
+	}
+}
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		alignItems: "center",
+		paddingTop: unitHeight * 25,
+		backgroundColor:"#fff"
+	},
+	topIcon: {
+		width: unitWidth * 235,
+		height: unitHeight * 210,
+		marginBottom: unitHeight * 44
+	},
+	btnList: {
+		alignItems: "center"
+	},
+	btnItem: {
+		width: unitWidth * 502,
+		height: unitHeight * 80,
+		justifyContent: "center",
+		alignItems: "center",
+		backgroundColor: "#F2F2F2",
+		marginBottom: unitHeight * 30,
+		borderRadius: unitHeight * 80
+	},
+	btnItemRed:{
+		width: unitWidth * 502,
+		height: unitHeight * 80,
+		justifyContent: "center",
+		alignItems: "center",
+		backgroundColor: "#FB788A",
+		marginBottom: unitHeight * 30,
+		borderRadius: unitHeight * 80
+	}
+})

js/page/PassMode1.js

@@ -0,0 +1,116 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, Image } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+
+export default class PassMode1 extends Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.topArea}>
+                    <View style={styles.tit}>
+                        <Text style={styles.titText}>第一关</Text>
+                    </View>
+                    <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人你会选择你爱的人还是爱你的人</Text>
+                </View>
+                <View style={styles.btnList}>
+                    <View style={styles.btnItem}>
+                        <View style={styles.btnItemLeft}>
+                            <Text style={{ fontSize: unitWidth * 60, color: "#FFE1EE" }}>A</Text>
+                        </View>
+                        <View style={styles.btnItemRight}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</Text>
+                        </View>
+                    </View>
+                    <View style={styles.btnItemRed}>
+                        <View style={styles.btnItemLeft}>
+                            <Text style={{ fontSize: unitWidth * 60, color: "#FFE1EE" }}>B</Text>
+                        </View>
+                        <View style={styles.btnItemRight}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</Text>
+                        </View>
+                    </View>
+                    <View style={styles.btnItem}>
+                        <View style={styles.btnItemLeft}>
+                            <Text style={{ fontSize: unitWidth * 60, color: "#FFE1EE" }}>C</Text>
+                        </View>
+                        <View style={styles.btnItemRight}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</Text>
+                        </View>
+                    </View>
+                    <View style={styles.btnItem}>
+                        <View style={styles.btnItemLeft}>
+                            <Text style={{ fontSize: unitWidth * 60, color: "#FFE1EE" }}>D</Text>
+                        </View>
+                        <View style={styles.btnItemRight}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</Text>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: "center"
+    },
+    topArea: {
+        width: "100%",
+        paddingLeft: unitWidth * 24,
+        paddingRight: unitWidth * 24,
+        paddingTop: unitHeight * 20,
+    },
+    tit: {
+        borderLeftWidth: unitWidth * 4,
+        borderColor: "#FA788A",
+        paddingLeft: unitWidth * 12,
+        justifyContent: "center",
+        marginBottom: unitHeight * 47
+    },
+    titText: {
+        fontSize: unitWidth * 28,
+        color: "#333333",
+        fontWeight: "bold"
+    },
+    btnList: {
+        paddingLeft:unitWidth * 30,
+        marginTop: unitHeight * 60,
+        width:"100%"
+    },
+    btnItem: {
+        width: unitWidth * 642,
+        height: unitHeight * 80,
+        backgroundColor: "#F2F2F2",
+        marginBottom: unitHeight * 30,
+        borderRadius: unitHeight * 80,
+        flexDirection: "row",
+        alignItems: "center",
+        borderWidth:1,
+        borderColor:"#ccc"
+    },
+    btnItemLeft: {
+        flex: 1,
+        height: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRightWidth: 1,
+        borderRightColor: "#FFD1D1"
+    },
+    btnItemRight: {
+        flex: 4,
+        paddingLeft: unitWidth * 23,
+        paddingRight: unitWidth * 23
+    },
+    btnItemRed: {
+        width: unitWidth * 642,
+        height: unitHeight * 80,
+        backgroundColor: "#FB788A",
+        marginBottom: unitHeight * 30,
+        borderRadius: unitHeight * 80,
+        flexDirection: "row",
+        alignItems: "center",
+        borderWidth:1,
+        borderColor:"#FF4A6C"
+    }
+})