推荐关注

js/navigator/AppNavigators.js

@@ -24,6 +24,7 @@ import PassMode from "../page/PassMode"
 import PassMode1 from "../page/PassMode1"
 import CreatPass from "../page/CreatPass"
 import GameHome from "../page/GameHome"
+import RecommendGamer from "../page/RecommendGamer"
 const InitNavigator = createStackNavigator({
     LoginPage: {
         screen: LoginPage,
@@ -39,6 +40,12 @@ const InitNavigator = createStackNavigator({
     }
 })
 const MainNavigator = createStackNavigator({
+    RecommendGamer: {
+        screen: RecommendGamer,
+        navigationOptions: {
+            headerTitle: "推荐关主"
+        }
+    },
     GameHome: {
         screen: GameHome,
         navigationOptions: {

js/page/RecommendGamer.js

@@ -0,0 +1,206 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, Image } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+import FontAwesome from "react-native-vector-icons/FontAwesome"
+import MyButtom from '../component/MyButton'
+
+export default class RecommendGamer extends Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.gamerList}>
+                    <View style={styles.itemArea}>
+                        <View style={styles.itemTop}>
+                            <Image
+                                source={require("../../static/bannerBgc.png")}
+                                style={styles.phone}
+                            />
+                            <View style={styles.userInfo}>
+                                <View style={styles.userTit}>
+                                    <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>萱萱</Text>
+                                    <Text>{"<500m"}</Text>
+                                </View>
+                                <Text style={{ fontSize: unitWidth * 24, color: "#333333" }}>26岁/163/本科/7000-10000</Text>
+                                <View style={styles.userTips}>
+                                    <View style={styles.tipsOnce}>
+                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>身材苗条</Text>
+                                    </View>
+                                    <View style={styles.tipsOnce}>
+                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>文艺</Text>
+                                    </View>
+                                    <View style={styles.tipsOnce}>
+                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>旅行</Text>
+                                    </View>
+                                </View>
+                            </View>
+                        </View>
+                        <View style={styles.itemBottom}>
+                            <View style={styles.itemBottomLeft}>
+                                <FontAwesome
+                                    name={"heartbeat"}
+                                    size={20}
+                                    style={{ color: "#FB788A" }}
+                                />
+                                <Text style={{ color: "#999999", fontSize: unitWidth * 24, marginLeft: unitWidth * 10 }}>魅力值：90</Text>
+                            </View>
+                            <View style={styles.itemBottomRight}>
+                                <MyButtom
+                                    text={"查看关卡"}
+                                    width={unitWidth * 144}
+                                    height={unitHeight * 58}
+                                    borderRadius={unitHeight * 10}
+                                    bgColor="#fff"
+                                    borderColor="#FA788A"
+                                    borderWidth={1}
+                                    shadowBgc="#fff"
+                                    style={{ fontSize: unitWidth * 28, color: "#FA788A" }}
+                                />
+                                <MyButtom
+                                    text={"开始闯关"}
+                                    width={unitWidth * 144}
+                                    height={unitHeight * 58}
+                                    borderRadius={unitHeight * 10}
+                                    bgColor="#FF4A6C"
+                                    borderColor="#FF4A6C"
+                                    borderWidth={1}
+                                    shadowBgc="#FB788A"
+                                    style={{ fontSize: unitWidth * 28, color: "#fff" }}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                    <View style={styles.itemArea}>
+                        <View style={styles.itemTop}>
+                            <Image
+                                source={require("../../static/bannerBgc.png")}
+                                style={styles.phone}
+                            />
+                            <View style={styles.userInfo}>
+                                <View style={styles.userTit}>
+                                    <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>萱萱</Text>
+                                    <Text>{"<500m"}</Text>
+                                </View>
+                                <Text style={{ fontSize: unitWidth * 24, color: "#333333" }}>26岁/163/本科/7000-10000</Text>
+                                <View style={styles.userTips}>
+                                    <View style={styles.tipsOnce}>
+                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>身材苗条</Text>
+                                    </View>
+                                    <View style={styles.tipsOnce}>
+                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>文艺</Text>
+                                    </View>
+                                    <View style={styles.tipsOnce}>
+                                        <Text style={{ fontSize: unitWidth * 24, color: "#FDB1B1" }}>旅行</Text>
+                                    </View>
+                                </View>
+                            </View>
+                        </View>
+                        <View style={styles.itemBottom}>
+                            <View style={styles.itemBottomLeft}>
+                                <FontAwesome
+                                    name={"heartbeat"}
+                                    size={20}
+                                    style={{ color: "#FB788A" }}
+                                />
+                                <Text style={{ color: "#999999", fontSize: unitWidth * 24, marginLeft: unitWidth * 10 }}>魅力值：90</Text>
+                            </View>
+                            <View style={styles.itemBottomRight}>
+                                <MyButtom
+                                    text={"查看关卡"}
+                                    width={unitWidth * 144}
+                                    height={unitHeight * 58}
+                                    borderRadius={unitHeight * 10}
+                                    bgColor="#fff"
+                                    borderColor="#FA788A"
+                                    borderWidth={1}
+                                    shadowBgc="#fff"
+                                    style={{ fontSize: unitWidth * 28, color: "#FA788A" }}
+                                />
+                                <MyButtom
+                                    text={"开始闯关"}
+                                    width={unitWidth * 144}
+                                    height={unitHeight * 58}
+                                    borderRadius={unitHeight * 10}
+                                    bgColor="#FF4A6C"
+                                    borderColor="#FF4A6C"
+                                    borderWidth={1}
+                                    shadowBgc="#FB788A"
+                                    style={{ fontSize: unitWidth * 28, color: "#fff" }}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                
+                </View>
+            </View>
+        )
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: "center",
+        paddingLeft: unitWidth * 23,
+        paddingRight: unitWidth * 23,
+        paddingTop: unitHeight * 57
+    },
+    gamerList: {
+        width: "100%"
+    },
+    itemArea: {
+        width: unitWidth * 702,
+        height: unitHeight * 308,
+        backgroundColor: "#F9F9F9",
+        borderRadius: unitHeight * 10,
+        paddingTop: unitHeight * 20,
+        marginBottom:unitHeight * 30,
+        paddingLeft:unitWidth * 20
+    },
+    itemTop: {
+        flexDirection: "row"
+    },
+    phone: {
+        flex: 1,
+        height: unitHeight * 180
+    },
+    userInfo: {
+        flex: 2,
+        paddingLeft: unitWidth * 20,
+        paddingRight: unitWidth * 20
+    },
+    userTit: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginBottom: unitHeight * 30
+    },
+    userTips: {
+        flexDirection: "row",
+        marginTop: unitHeight * 25
+    },
+    tipsOnce: {
+        height: unitHeight * 42,
+        backgroundColor: "#FCF2F6",
+        borderRadius: unitHeight * 42,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingLeft: unitWidth * 20,
+        paddingRight: unitWidth * 20,
+        marginLeft: unitWidth * 10,
+        marginRight: unitWidth * 10
+    },
+    itemBottom: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginTop: unitHeight * 30,
+        paddingLeft: unitWidth * 20,
+        paddingRight: unitWidth * 20
+    },
+    itemBottomLeft: {
+        flexDirection: "row",
+    },
+    itemBottomRight: {
+        flexDirection: "row",
+        width: unitWidth * 320,
+        justifyContent: "space-between"
+    }
+})