React Native实现弹出选择框

React Native实现弹出选择框
弹出框实现代码

import React,{
    PureComponent,PropTypes
} from 'react';
import {
    View,StyleSheet,Modal,TouchableOpacity,Text,TouchableWithoutFeedback
} from 'react-native';
const SEPARATOR_HEIGHT = StyleSheet.hairlineWidth;

class Item extends PureComponent {

    render() {
        const {
            item
        } = this.props;
        return (
            <TouchableOpacity style={[styles.item,item.style]} onPress={item.onPress}>
                <Text style={[styles.itemText,item.textStyle]}>
                    {item.text}
                </Text>
            </TouchableOpacity>
        );
    }
}

class AlertDialog extends PureComponent {

    static propTypes = {
        ...Modal.propTypes,data: PropTypes.array
    };

    static defaultProps = {
        animationType: 'none',transparent: true,visible: false,data: [],onShow: () => {},onRequestClose: () => {},onOutSidePress: () => {}
    }

    render() {
        const {
            animationType,transparent,visible,onShow,onRequestClose,onOutSidePress,data
        } = this.props;
        this.alertItem = this.data || (
            data.map((dt,index) => <Item item={dt} key={index}/>)
        );
        return (
            <Modal
                animationType={animationType}
                transparent={transparent}
                visible={visible}
                onShow={onShow}
                onRequestClose={onRequestClose}>
                <TouchableWithoutFeedback onPress={onOutSidePress} style={styles.modalStyle}>
                    <View style={styles.modalStyle}>
                        <View style={styles.subView}>
                            {this.alertItem}
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </Modal>
        );
    }
}

const styles = StyleSheet.create({
    // modal的样式
    modalStyle: {
        alignItems: 'center',justifyContent: 'center',flex: 1,backgroundColor: 'rgba(0,0.2)',},// modal上子View的样式
    subView: {
        marginLeft: 30,marginRight: 30,backgroundColor: '#fff',alignSelf: 'stretch',borderRadius: 3
    },item: {
        borderBottomColor: '#dddddd',borderBottomWidth: SEPARATOR_HEIGHT
    },itemText: {
        fontSize:16,color: '#333333'
    }
});

export default AlertDialog;

Props

• data - [] 包括 style，textStyle，onPress，text，其中一项的内容
• modal的props
• onOutSidePress - function 点击弹框外部动作

使用代码

import React,{
    PureComponent
} from 'react';
import {
    View
} from 'react-native';

import AlertDialog from './AlertDialog';

class Alert extends PureComponent {
    constructor(props) {
        super(props);
        this.item;
        this.state = {
            alertDialogVisible: false
        };
    }

    showAlertDialog = () => {
        this.setState({
            alertDialogVisible: true
        });
    }

    dismissAlertDialog = () => {
        this.setState({
            alertDialogVisible: false
        });
    }

    render() {
        let alertdata = [{
            text: '修改分组名字',style: {padding: 15},onPress: () => {}
        },{
            text: '删除该分组',onPress: ()=>{}
        }];
        return (
            <View>
                <AlertDialog
                    data={alertdata}
                    alertItem={this._alertItem}
                    visible={this.state.alertDialogVisible}
                    onRequestClose={this.dismissAlertDialog}
                    onOutSidePress={this.dismissAlertDialog}
                />
            </View>
        );
    }
}

export default Alert;