选择关卡

js/navigator/AppNavigators.js

@@ -25,6 +25,7 @@ import PassMode1 from "../page/PassMode1"
 import CreatPass from "../page/CreatPass"
 import GameHome from "../page/GameHome"
 import RecommendGamer from "../page/RecommendGamer"
+import GamerList from "../page/GamerList"
 const InitNavigator = createStackNavigator({
     LoginPage: {
         screen: LoginPage,
@@ -40,6 +41,12 @@ const InitNavigator = createStackNavigator({
     }
 })
 const MainNavigator = createStackNavigator({
+    GamerList: {
+        screen: GamerList,
+        navigationOptions: {
+            headerTitle: "选择关卡"
+        }
+    },
     RecommendGamer: {
         screen: RecommendGamer,
         navigationOptions: {

js/page/GamerList.js

@@ -0,0 +1,76 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+import Ionicons from "react-native-vector-icons/Ionicons"
+
+export default class GamerList extends Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.gamerList}>
+                    <View style={styles.item}>
+                        <View style={styles.itemTit}>
+                            <Ionicons
+                                name={"ios-radio-button-on"}
+                                size={16}
+                                style={{ color: "#FF4A6C" }}
+                            />
+                            <Text style={{ fontSize: unitWidth * 28, color: "#fff", marginLeft: unitWidth * 20 }}>第一关</Text>
+                        </View>
+                        <Text style={{ fontSize: unitWidth * 24, color: "#fff", lineHeight: unitHeight * 30 }}>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</Text>
+                    </View>
+                    <View style={styles.item}>
+                        <View style={styles.itemTit}>
+                            <Ionicons
+                                name={"ios-radio-button-on"}
+                                size={16}
+                                style={{ color: "#FF4A6C" }}
+                            />
+                            <Text style={{ fontSize: unitWidth * 28, color: "#fff", marginLeft: unitWidth * 20 }}>第二关</Text>
+                        </View>
+                        <Text style={{ fontSize: unitWidth * 24, color: "#fff", lineHeight: unitHeight * 30 }}>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</Text>
+                    </View>
+                    <View style={styles.item}>
+                        <View style={styles.itemTit}>
+                            <Ionicons
+                                name={"ios-radio-button-on"}
+                                size={16}
+                                style={{ color: "#FF4A6C" }}
+                            />
+                            <Text style={{ fontSize: unitWidth * 28, color: "#fff", marginLeft: unitWidth * 20 }}>第三关</Text>
+                        </View>
+                        <Text style={{ fontSize: unitWidth * 24, color: "#fff", lineHeight: unitHeight * 30 }}>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</Text>
+                    </View>
+
+                </View>
+            </View>
+        )
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        // justifyContent: "center",
+        alignItems: "center",
+        paddingLeft: unitWidth * 25,
+        paddingRight: unitWidth * 25,
+        paddingTop: unitHeight * 50
+    },
+    gamerList: {
+        width: "100%",
+    },
+    item: {
+        width: "100%",
+        height: unitHeight * 214,
+        backgroundColor: "#FFB29D",
+        borderRadius: unitHeight * 10,
+        paddingTop: unitHeight * 37,
+        paddingLeft: unitWidth * 20,
+        paddingRight: unitWidth * 20,
+        marginBottom: unitHeight * 50
+    },
+    itemTit: {
+        flexDirection: "row",
+        marginBottom: unitHeight * 40
+    }
+})