import React, {Component} from 'react';
import {Dimensions, Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native';const {width} = Dimensions.get('window');
export default class CustomAlertDialog extends Component {constructor(props) {super(props);this.state = {isVisible: this.props.show,};this.entityList = this.props.entityList;}componentWillReceiveProps(nextProps) {this.setState({isVisible: nextProps.show});}closeModal() {this.setState({isVisible: false});this.props.closeModal(false);}renderItem(item, i) {return (<TouchableOpacity key={i} onPress={this.choose.bind(this, i)} style={styles.item}><Text style={styles.itemText}>{item}</Text></TouchableOpacity>);}choose(i) {if (this.state.isVisible) {this.props.callback(i);this.closeModal();}}renderDialog() {return (<View style={styles.modalStyle}><View style={styles.optArea}>{this.entityList.map((item, i) => this.renderItem(item, i))}</View></View>)}render() {return (<View style={{flex: 1}}><Modaltransparent={true}visible={this.state.isVisible}animationType={'fade'}onRequestClose={() => this.closeModal()}><TouchableOpacity style={styles.container} activeOpacity={1}onPress={() => this.closeModal()}>{this.renderDialog()}</TouchableOpacity></Modal></View>);}
}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: 'rgba(0, 0, 0, 0.5)',},modalStyle: {position: "absolute",left: 0,bottom: 0,width: width,flex: 1,flexDirection: "column",backgroundColor: '#ffffff',},optArea: {flex: 1,flexDirection: 'column',marginTop: 12,marginBottom: 12,},item: {width: width,height: 40,paddingLeft: 20,paddingRight: 20,alignItems: 'center',},itemText: {fontSize: 16,},cancel: {width: width,height: 30,marginTop: 12,alignItems: 'center',backgroundColor: '#ffffff'},
});

import React, {Component} from "react";
import {StyleSheet, Text, TouchableHighlight, View,} from 'react-native';
import CustomAlertDialog from "./CustomAlertDialog";const typeArr = ["不限", "男", "女"];export default class TestCustomAlert extends Component {constructor(props) {super(props);this.state = {typeName: '性别',type: 0,showTypePop: false,}}_openTypeDialog() {this.setState({showTypePop: !this.state.showTypePop})}render() {return (<View style={{flex: 1}}><TouchableHighlight onPress={() => this._openTypeDialog()} style={styles.button}underlayColor="#a5a5a5"><Text>{this.state.typeName}-{this.state.type}</Text></TouchableHighlight><CustomAlertDialog entityList={typeArr} callback={(i) => {this.setState({type: i,typeName: typeArr[i],})}} show={this.state.showTypePop} closeModal={(show) => {this.setState({showTypePop: show})}}/></View>);}
}const styles = StyleSheet.create({button: {margin: 3,backgroundColor: 'white',padding: 10,borderBottomWidth: StyleSheet.hairlineWidth,borderBottomColor: '#cdcdcd'},
});