创建关卡

js/navigator/AppNavigators.js

@@ -22,6 +22,7 @@ import WaitAttestation from "../page/WaitAttestation"
 import AttestationInfo from "../page/AttestationInfo"
 import PassMode from "../page/PassMode"
 import PassMode1 from "../page/PassMode1"
+import CreatPass from "../page/CreatPass"
 
 const InitNavigator = createStackNavigator({
     LoginPage: {
@@ -38,6 +39,12 @@ const InitNavigator = createStackNavigator({
     }
 })
 const MainNavigator = createStackNavigator({
+    CreatPass: {
+        screen: CreatPass,
+        navigationOptions: {
+            headerTitle: "创建关卡"
+        }
+    },
     PassMode1: {
         screen: PassMode1,
         navigationOptions: {

js/page/CreatPass.js

@@ -0,0 +1,289 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, Image, TextInput, ScrollView } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+import AntDesign from "react-native-vector-icons/AntDesign"
+import Ionicons from "react-native-vector-icons/Ionicons"
+import MyButtom from '../component/MyButton'
+
+export default class CreatPass extends Component {
+    render() {
+        return (
+            <ScrollView>
+                <View style={styles.container}>
+                    <View style={styles.sec}>
+                        <View style={styles.secTitle}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", fontWeight: "bold" }}>推荐关卡</Text>
+                        </View>
+                    </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 style={styles.sec}>
+                        <View style={styles.secTitle}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", fontWeight: "bold" }}>关卡题目</Text>
+                        </View>
+                        <TextInput
+                            placeholder="请输入题目标题"
+                            placeholderTextColor={"#999999"}
+                            style={styles.TextInput1}
+                        />
+                    </View>
+                    <View style={styles.sec}>
+                        <View style={styles.secTitle2}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", fontWeight: "bold" }}>题目选项</Text>
+                            <Text style={{ fontSize: unitWidth * 24, color: "#999999", marginLeft: unitWidth * 20, }}>填完选项后点击右侧单选按钮确定您的答案</Text>
+                        </View>
+                        <View style={styles.ansList}>
+                            <View style={styles.ansItem}>
+                                <View style={styles.ansItemLeft}>
+                                    <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>选项A</Text>
+                                </View>
+                                <View style={styles.ansItemIcon}>
+                                    <Ionicons
+                                        name={"md-radio-button-on"}
+                                        size={18}
+                                        style={{ color: "#FA788A" }}
+                                    />
+                                </View>
+                            </View>
+                            <View style={styles.ansItem}>
+                                <View style={styles.ansItemLeft}>
+                                    <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>选项A</Text>
+                                </View>
+                                <View style={styles.ansItemIcon}>
+                                    <AntDesign
+                                        name={"delete"}
+                                        size={18}
+                                        style={{ color: "#999999" }}
+                                    />
+                                    <Ionicons
+                                        name={"md-radio-button-on"}
+                                        size={18}
+                                        style={{ color: "#999999" }}
+                                    />
+                                </View>
+                            </View>
+                            <View style={styles.ansItem}>
+                                <View style={styles.ansItemLeft}>
+                                    <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>选项A</Text>
+                                </View>
+                                <View style={styles.ansItemIcon}>
+                                    <AntDesign
+                                        name={"delete"}
+                                        size={18}
+                                        style={{ color: "#999999" }}
+                                    />
+                                    <Ionicons
+                                        name={"md-radio-button-on"}
+                                        size={18}
+                                        style={{ color: "#999999" }}
+                                    />
+                                </View>
+                            </View>
+
+                        </View>
+                        <View style={styles.addAns}>
+                            <Ionicons
+                                name={"ios-add-circle-outline"}
+                                size={18}
+                                style={{ color: "#FA788A", marginRight: unitWidth * 10 }}
+                            />
+                            <Text style={{ color: "#FA788A" }}>新建选项</Text>
+                        </View>
+                    </View>
+                    <View style={styles.sec}>
+                        <View style={styles.secTitle}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", fontWeight: "bold" }}>关卡奖励</Text>
+                        </View>
+                        <View style={styles.bottomitem}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", flex: 1 }}>手机号码</Text>
+                            <TextInput
+                                placeholder="请输入您的手机号码"
+                                placeholderTextColor={"#999999"}
+                                style={styles.bottomTextInput}
+                            />
+                        </View>
+                        <View style={styles.bottomitem}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", flex: 1 }}>生活照</Text>
+                            <View style={styles.uploadiconArea}>
+                                <View style={styles.uploadiconBox}>
+                                    <Ionicons
+                                        name={"ios-add-circle-outline"}
+                                        size={45}
+                                        style={{ color: "#FA788A", marginRight: unitWidth * 10 }}
+                                    />
+                                    <Text>上传照片</Text>
+                                </View>
+                            </View>
+                        </View>
+                        <View style={styles.bottomitem}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", flex: 1 }}>游戏邀请</Text>
+                            <View style={styles.uploadiconArea}>
+                                <View style={styles.resive}>
+                                    <Ionicons
+                                        name={"md-radio-button-on"}
+                                        size={20}
+                                        style={{ color: "#999999", marginRight: unitWidth * 10 }}
+                                    />
+                                    <Text style={{ color: "#333333", fontSize: unitWidth * 28 }}>接收</Text>
+                                </View>
+                            </View>
+                        </View>
+
+                    </View>
+                    <View style={styles.bottomBtn}>
+                        <MyButtom
+                            text={"发布关卡"}
+                            width={unitWidth * 502}
+                            height={unitHeight * 84}
+                            borderRadius={unitHeight * 84}
+                            bgColor="#FA788A"
+                            shadowBgc="rgba(250,120,138,1)"
+                            style={{ fontSize: unitWidth * 32 }}
+                        />
+                    </View>
+                </View>
+
+            </ScrollView>
+
+        )
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: "center",
+        backgroundColor: "#fff"
+    },
+    sec: {
+        width: "100%",
+        paddingLeft: unitWidth * 23,
+        paddingRight: unitWidth * 23
+    },
+    secTitle: {
+        width: "100%",
+        marginBottom: unitHeight * 18,
+        marginTop: unitHeight * 25
+    },
+    secTitle2: {
+        width: "100%",
+        marginBottom: unitHeight * 18,
+        marginTop: unitHeight * 25,
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    TextInput1: {
+        width: "100%",
+        height: unitHeight * 80,
+        paddingLeft: unitWidth * 20,
+        borderWidth: 1,
+        borderColor: "#DEDEDE"
+    },
+    topIcon: {
+        width: unitWidth * 235,
+        height: unitHeight * 210,
+        marginBottom: unitHeight * 44
+    },
+    btnList: {
+        alignItems: "center"
+    },
+    btnItem: {
+        width: unitWidth * 700,
+        height: unitHeight * 88,
+        justifyContent: "center",
+        alignItems: "center",
+        marginBottom: unitHeight * 19,
+        borderRadius: unitHeight * 88,
+        borderWidth: 1,
+        borderColor: "#FFD1D1"
+    },
+    btnItemRed: {
+        width: unitWidth * 700,
+        height: unitHeight * 88,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#FB788A",
+        marginBottom: unitHeight * 19,
+        borderRadius: unitHeight * 88,
+        borderWidth: 1,
+        borderColor: "#FFD1D1"
+    },
+    ansList: {
+        width: "100%"
+    },
+    ansItem: {
+        width: "100%",
+        height: unitHeight * 80,
+        flexDirection: "row",
+        marginBottom: unitHeight * 19
+    },
+    ansItemLeft: {
+        flex: 4,
+        height: "100%",
+        borderWidth: 1,
+        borderColor: "#DEDEDE",
+        justifyContent: "center",
+        paddingLeft: unitWidth * 20
+    },
+    ansItemIcon: {
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-around",
+        alignItems: "center"
+    },
+    addAns: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        marginRight: unitWidth * 150
+    },
+    bottomitem: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: unitHeight * 19
+    },
+    bottomTextInput: {
+        height: unitHeight * 80,
+        borderWidth: 1,
+        borderColor: "#DEDEDE",
+        flex: 4,
+        paddingLeft: unitWidth * 20
+    },
+    uploadiconArea: {
+        flex: 4
+    },
+    uploadiconBox: {
+        width: unitHeight * 140,
+        height: unitHeight * 120,
+        borderWidth: 1,
+        borderColor: "#DEDEDE",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingTop: unitHeight * 12,
+        paddingBottom: unitHeight * 15,
+    },
+    resive: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    bottomBtn: {
+        width: "100%",
+        marginTop: unitHeight * 90,
+        height: unitHeight * 84,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: unitHeight * 34
+    },
+})