reactnative简略封装选项框

import React, {Component} from 'react';
import {
    View, Text, FlatList, TouchableOpacity, Modal
} from 'react-native';

//字段: data=选项数据 title=选项标题 field=显示字段 onSelect=选择的回调方法
export default class CSelect extends Component {

    constructor(props) {
        super(props);
        this.state = {visible: false}
    }

    componentDidMount() {
    }

    showSelect() {
        this.setState({visible: true});
    }

    hiddenSelect() {
        this.setState({visible: false});
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={() => {
                    this.showSelect();
                }}>
                    <Text style={{fontSize:30}}>{this.props.title}</Text>
                </TouchableOpacity>
                <Modal
                    animationType={"slide"}
                    transparent={false}
                    visible={this.state.visible}
                    onRequestClose={() => {
                        this.hiddenSelect();
                    }}
                >
                    <View style={{marginTop: 22}}>
                        <FlatList
                            data={this.props.data}
                            renderItem={({item}) =>
                                <TouchableOpacity onPress={() => {
                                    this.hiddenSelect();
                                    this.props.onSelect(item);
                                }}>
                                    <Text style={{fontSize: 20}}>
                                        {/*{item.text}*/}
                                        {eval('item.' + this.props.field)}
                                        </Text>
                                </TouchableOpacity>}
                        />
                    </View>
                </Modal>
            </View>
        );
    }
}

使用

<CSelect data={alertdata} title={'测试'} field={'text'} onSelect={(item) => {
    // log(item);
}} />