kangaroo/js/page/CreatPass.js

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
    },
})