游戏大厅

js/navigator/AppNavigators.js

@@ -23,7 +23,7 @@ import AttestationInfo from "../page/AttestationInfo"
 import PassMode from "../page/PassMode"
 import PassMode1 from "../page/PassMode1"
 import CreatPass from "../page/CreatPass"
-
+import GameHome from "../page/GameHome"
 const InitNavigator = createStackNavigator({
     LoginPage: {
         screen: LoginPage,
@@ -39,6 +39,12 @@ const InitNavigator = createStackNavigator({
     }
 })
 const MainNavigator = createStackNavigator({
+    GameHome: {
+        screen: GameHome,
+        navigationOptions: {
+            headerTitle: "游戏大厅"
+        }
+    },
     CreatPass: {
         screen: CreatPass,
         navigationOptions: {

js/page/GameHome.js

@@ -0,0 +1,129 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, Image, ImageBackground, ScrollView } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+import Ionicons from "react-native-vector-icons/Ionicons"
+import FontAwesome5 from "react-native-vector-icons/FontAwesome5"
+
+export default class GameHome extends Component {
+
+    render() {
+        return (
+            <ScrollView>
+                <View style={styles.container}>
+                    <Image
+                        source={require("../../static/bannerBgc.png")}
+                        style={styles.bannerBgc}
+                    />
+                    <View style={styles.centerTab}>
+                        <ImageBackground source={require('../../static/tabBgc1.png')}
+                            style={styles.tabBgc}
+                        >
+                            <Text style={styles.tabText}>闯关游戏</Text>
+                        </ImageBackground>
+                        <ImageBackground source={require('../../static/tabBgc2.png')}
+                            style={styles.tabBgc}
+                        >
+                            <Text style={styles.tabText}>谁是卧底</Text>
+                        </ImageBackground>
+                    </View>
+                    <View style={styles.cardList}>
+                        <View style={styles.cardItem}>
+                            <View style={styles.cardTit}>
+                                <Ionicons
+                                    name={"ios-radio-button-on"}
+                                    size={20}
+                                    style={{ color: "#FB788A" }}
+                                />
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>推荐关卡</Text>
+                            </View>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginBottom: unitHeight * 24 }}>关卡关卡关卡关卡关卡关卡关卡关卡关卡关卡关卡关卡关卡</Text>
+                            <Image
+                                source={require("../../static/bannerBgc.png")}
+                                style={styles.cardBgc}
+                            />
+                            <View style={styles.cardBottom}>
+                                <View style={styles.cardBottomItem}>
+                                    <FontAwesome5
+                                        name={"crown"}
+                                        size={20}
+                                        style={{ color: "orange" }}
+                                    />
+                                    <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>关主：明明</Text>
+                                </View>
+                                <View style={styles.cardBottomItem}>
+                                    <FontAwesome5
+                                        name={"heartbeat"}
+                                        size={20}
+                                        style={{ color: "#FB788A" }}
+                                    />
+                                    <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>魅力值：90</Text>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+            </ScrollView>
+
+        )
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: "center",
+        paddingLeft: unitWidth * 23,
+        paddingRight: unitWidth * 23
+    },
+    bannerBgc: {
+        height: unitHeight * 300,
+        width: "100%",
+        marginTop: unitHeight * 10
+    },
+    centerTab: {
+        width: "100%",
+        height: unitHeight * 200,
+        marginTop: unitHeight * 30,
+        marginBottom: unitHeight * 30,
+        flexDirection: "row",
+        justifyContent: "space-between"
+    },
+    tabBgc: {
+        width: unitWidth * 342,
+        height: unitHeight * 200,
+        justifyContent: "center",
+        paddingLeft: unitWidth * 42,
+    },
+    tabText: {
+        fontSize: unitWidth * 32,
+        color: "#FFFFFF",
+        fontWeight: "bold"
+    },
+    cardList: {
+        width: "100%"
+    },
+    cardItem: {
+        width: "100%",
+        height: unitHeight * 880
+    },
+    cardTit: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: unitHeight * 23
+    },
+    cardBgc: {
+        width: "100%",
+        height: unitHeight * 650,
+        borderRadius: unitHeight * 20
+    },
+    cardBottom: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingLeft: unitWidth * 30,
+        paddingRight: unitWidth * 30,
+        marginTop: unitHeight * 30
+    },
+    cardBottomItem: {
+        flexDirection: "row",
+        alignItems: "center"
+    }
+})

js/page/PassMode1.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { StyleSheet, Text, View, Image } from "react-native"
+import { StyleSheet, Text, View } from "react-native"
 import { unitWidth, unitHeight } from "../utils/AdapterUtil";
 
 export default class PassMode1 extends Component {