kangaroo/js/page/register2.js

import React, { Component } from "react"
import { StyleSheet, Text, View } from "react-native"
import AntDesign from "react-native-vector-icons/AntDesign"
import RNPickerSelect from 'react-native-picker-select';
import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
import MyButtom from '../component/MyButton'

export default class Register2 extends Component {
    state = {
        placeholderText: {
            label: '10w-20w',
            value: null,
            color: '#333333',
        }
    };
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.itemArea}>
                    <Text style={styles.itemTitle}>请选择您的月收入</Text>
                    <View style={styles.selectItem}>
                        <RNPickerSelect
                            placeholder={this.state.placeholderText}
                            placeholderTextColor={"#333333"}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        />
                    </View>
                </View>
                <View style={styles.itemArea}>
                    <Text style={styles.itemTitle}>请选择您的学历</Text>
                    <View style={styles.item}>
                        <View style={styles.itemOnceColor}>
                            <Text style={styles.itemOnceTextColor}>
                                高中及以下
                            </Text>
                        </View>
                        <View style={styles.itemOnce}>
                            <Text style={styles.itemOnceText}>
                                大专
                            </Text>
                        </View>
                        <View style={styles.itemOnce}>
                            <Text style={styles.itemOnceText}>
                                本科
                            </Text>
                        </View>
                        <View style={styles.itemOnce}>
                            <Text style={styles.itemOnceText}>
                                硕士
                            </Text>
                        </View>
                        <View style={styles.itemOnce}>
                            <Text style={styles.itemOnceText}>
                                博士
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.itemArea}>
                    <Text style={styles.itemTitle}>请选择您的兴趣标签</Text>
                    <View style={styles.itemList}>
                        <AntDesign
                            name={"message1"}
                            size={24}
                            style={{ color: "#FA7B8D", marginRight: unitWidth * 20 }}
                        />
                        <View style={styles.itemListCenter}>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    薯条
                            </Text>
                            </View>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    素食
                            </Text>
                            </View>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    甜品
                            </Text>
                            </View>
                        </View>


                        <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>自定义</Text>
                    </View>
                    <View style={styles.itemList}>
                        <AntDesign
                            name={"message1"}
                            size={24}
                            style={{ color: "#FA7B8D", marginRight: unitWidth * 20 }}
                        />
                        <View style={styles.itemListCenter}>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    薯条
                            </Text>
                            </View>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    素食
                            </Text>
                            </View>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    甜品
                            </Text>
                            </View>
                        </View>
                        <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>自定义</Text>
                    </View>
                    <View style={styles.itemList}>
                        <AntDesign
                            name={"message1"}
                            size={24}
                            style={{ color: "#FA7B8D", marginRight: unitWidth * 20 }}
                        />
                        <View style={styles.itemListCenter}>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    薯条
                            </Text>
                            </View>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    素食
                            </Text>
                            </View>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    甜品
                            </Text>
                            </View>
                        </View>
                        <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>自定义</Text>
                    </View>
                    <View style={styles.itemList}>
                        <AntDesign
                            name={"message1"}
                            size={24}
                            style={{ color: "#FA7B8D", marginRight: unitWidth * 20 }}
                        />
                        <View style={styles.itemListCenter}>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    薯条
                            </Text>
                            </View>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    素食
                            </Text>
                            </View>
                            <View style={styles.itemListCOnce}>
                                <Text style={styles.itemListOnceText}>
                                    甜品
                            </Text>
                            </View>
                        </View>
                        <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>自定义</Text>
                    </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>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: getStatusBarHeight() + unitHeight * 30,
        paddingLeft: unitWidth * 60,
        paddingRight: unitWidth * 60,
    },
    itemArea: {
        width: "100%"
    },
    itemTitle: {
        fontSize: unitWidth * 28,
        color: "#333333"
    },
    item: {
        flexDirection: "row",
        marginTop: unitHeight * 35,
        marginBottom: unitHeight * 46
    },
    itemList: {
        flexDirection: "row",
        marginTop: unitHeight * 20,
        alignItems: "center",
        justifyContent: "flex-start"
    },
    itemListCenter: {
        width: unitWidth * 370,
        flexDirection: "row",
        justifyContent: "flex-start"
    },
    selectItem: {
        width: "100%",
        height: unitHeight * 68,
        marginTop: unitHeight * 35,
        borderRadius: unitHeight * 68,
        justifyContent: "center",
        paddingLeft: unitWidth * 50,
        borderWidth: unitWidth * 1,
        borderColor: "#ccc",
        marginBottom: unitHeight * 46
    },
    itemOnce: {
        height: unitHeight * 48,
        borderRadius: unitHeight * 28,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#fff",
        borderWidth: unitWidth * 1,
        borderColor: "#ccc",
        paddingLeft: unitWidth * 20,
        paddingRight: unitWidth * 20,
        marginRight: unitWidth * 20
    },
    itemListCOnce: {
        height: unitHeight * 42,
        borderRadius: unitHeight * 28,
        justifyContent: "center",
        alignItems: "center",
        borderWidth: unitWidth * 1,
        borderColor: "#FA7B8D",
        width: unitWidth * 108,
        marginRight: unitWidth * 20
    },
    itemOnceColor: {
        borderRadius: unitHeight * 28,
        backgroundColor: "#FA788A",
        height: unitHeight * 48,
        justifyContent: "center",
        alignItems: "center",
        paddingLeft: unitWidth * 20,
        paddingRight: unitWidth * 20,
        marginRight: unitWidth * 20
    },
    itemOnceTextColor: {
        fontSize: unitWidth * 28,
        color: "#fff"
    },
    itemOnceText: {
        fontSize: unitWidth * 28,
        color: "#333333"
    },
    itemListOnceText: {
        fontSize: unitWidth * 24,
        color: "#FA7B8D"
    },
    TextInput: {
        width: "100%",
        height: unitHeight * 78,
        borderRadius: unitHeight * 78,
        fontSize: unitWidth * 28,
        paddingLeft: unitWidth * 50,
        borderWidth: unitWidth * 1,
        borderColor: "#ccc"
    },
    seletItem: {
        width: "100%",
        height: unitHeight * 78,
        backgroundColor: "#f00"
    },
    bottomBtn: {
        width: "100%",
        marginTop: unitHeight * 343,
        height: unitHeight * 84,
        justifyContent: 'center',
        alignItems: 'center'
    }

})