react native 自定义对话框 替代Alert

对话框的问题：是一个很常见的问题，比如说删除时，就要询问用户，是否确认删除，这是为了避免用户误操作，使用react native时总想到的时用alert去写，实际上alert的样式在Android根本无法修改，所以如果是为了实现对话框，根本就可以完全不用Alert，而改用Modal，我们自己写一个满意的对话框就好了。

下面就是借用react-native-modal 组件修改出来的对话框

import React from "react";
import { Text, View, StyleSheet } from 'react-native';
import Modal from "react-native-modal";


/*
删除对话框
*/
class ModalDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true
        }
    }
    render() {
        return (
            <Modal
                isVisible={this.state.show}
                useNativeDriver={true}                //闪烁的问题
                hideModalContentWhileAnimating={true} //闪烁问题 
                avoidKeyboard={true}                  //键盘出现时，modal向上移动
                style={{ margin: 0, flex: 1, justifyContent: "center",alignItems:"center" }} //margin:0保证覆盖整个屏幕 
                backdropOpacity={0.2}
                onBackdropPress={() => this.handleBackPressModal()}
            >
                <View style={styles.dialogBox}>
                    <Text style={styles.dialogTitle}>确认删除吗？</Text>
                    <View style={styles.btnBox}>
                        <Text  style={[styles.dialogBtn,{color: "#2095F3"}]}>确认</Text>
                        <Text  style={[styles.dialogBtn,{color:"#000"}]}>取消</Text>
                    </View>
                </View>
            </Modal>
        );
    }
    handleBackPressModal(){
        this.setState({ show: false });
    }
}

let styles = StyleSheet.create({
    dialogBox:{
        width: 300,
        backgroundColor: "#fff",
        borderRadius: 5,
        paddingHorizontal: 10,
        paddingVertical: 15
    },
    dialogTitle:{
        textAlign:"center",
        fontSize: 18
    },
    btnBox:{
        display:"flex",
        flexDirection:"row",
        borderTopColor: "#ccc",
        borderTopWidth: 1,
        // backgroundColor:"yellow",
        marginTop: 15,
        paddingTop: 10
    },
    dialogBtn:{
        fontSize:20,
        fontWeight: "900",
        flexGrow:1,
        textAlign:"center"
    }
});

export default ModalDialog;