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); }} />