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 { toGamerList = () => { const { navigation } = this.props; navigation.navigate("GamerList") } 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 onPress={this.toGamerList} 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 }, })