kangaroo/js/page/Attestation/Select.js

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

export default class Select extends Component {

    render() {
        // let { text } = this.props
        return (
            <View style={styles.formArea}>
                    <View style={styles.formItem}>
                        <View style={styles.itemArea}>
                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>真实姓名：</Text>
                            <View style={styles.inputRight}>
                                <TextInput
                                    placeholder="请输入手机号"
                                    placeholderTextColor={"#999999"}
                                    style={styles.TextInput}
                                />
                            </View>
                        </View>
                    </View>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>学        历：</Text>
                                <View style={styles.selectRight}>
                                    <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>小学</Text>
                                    <AntDesign
                                        name={"caretdown"}
                                        size={15}
                                        style={{ color: "#999999" }}
                                    />
                                </View>
                            </View>
                        </RNPickerSelect>
                    </View>
                </View>
                
        )
    }
}
const styles = StyleSheet.create({
    formArea: {
        width: "100%",
        paddingTop: unitHeight * 30
    },
    formItem: {
        width: "100%",
        height: unitHeight * 72,
        backgroundColor: "#fff",
        marginBottom: unitHeight * 6,
    },
    itemArea: {
        width: "100%",
        height: "100%",
        flexDirection: "row",
        alignItems: "center",
        paddingLeft: unitWidth * 23,
        paddingRight: unitWidth * 24,
        borderBottomColor: "#F9F9F9",
        borderBottomWidth: 1
    },
    inputRight: {
        width: unitWidth * 566,
        height: "100%"
    },
    TextInput: {
        width: "100%",
        height: "100%",
        backgroundColor: "#F9F9F9",
        paddingLeft: unitWidth * 18
    },
    selectRight: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        width: unitWidth * 566,
        height: unitHeight * 72,
        backgroundColor: "#F9F9F9",
        paddingRight: unitWidth * 18,
        paddingLeft: unitWidth * 18
    },
})