React-native 学习之AlertDialog弹出框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34505202/article/details/78593113

/**
 * 功能： alert对话框
 */
'use strict';
/**
 * 导入模块
 */
// 系统模块
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableHighlight,
    Modal,
} from 'react-native';
import PropTypes from 'prop-types';
// 自定义模块
/**
 * 导入样式
 *
 */
// 自定义样式： 容器样式、引入列表项样式
import {Dialog} from '../style/AppStyle';
/**
 * 常量
 */
export default class AlertDialog extends Component {
    static propTypes = {
        title:PropTypes.string.isRequired, // 对话框标题
        message:PropTypes.string.isRequired, // 对话框标题
        buttonName: PropTypes.string.isRequired,  // 按钮名字
        onClick: PropTypes.func.isRequired,  // 回调函数
    };
    constructor(props) {
        super(props);
        // 绑定事件
        this._onClick  = this._onClick.bind(this);  // 需要在回调函数中使用this,必须使用bind(this)来绑定
    }
    _onClick() {
        if (this.props.onClick) {   // 在设置了回调函数的情况下
            this.props.onClick(this.props.pageName);  // 执行回调
        }
    }
    render() {
        return (
            <Modal
                visible={this.props.visibility}
                transparent={true}
                animationType={'fade'}//none slide fade
                onRequestClose={()=>this.setState({visibility:false})}
            >
                <View style={Dialog.container}>
                    <View style={Dialog.modalContainer}>
                        <Text style={Dialog.modalTitle}>{this.props.title}</Text>
                        <Text style={Dialog.modalMessage}>{this.props.message}</Text>
                        <View style={Dialog.horizonLine}/>
                        <View style={Dialog.row}>
                            <TouchableHighlight style={Dialog.leftBn} onPress={this.props.onClick} >
                                <Text style={Dialog.leftBnText}>{this.props.buttonName}</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
                </View>
            </Modal>
        )
    }
}

样式：

    container:{
        flex:1,
        backgroundColor:'rgba(0, 0, 0, 0.5)',
        justifyContent:'center',
        alignItems:'center'
    },
    modalContainer: {
        marginLeft: 50,
        marginRight: 50,
        borderRadius: 10,
        backgroundColor: "white",
        alignItems:'center',
    },
    modalTitle: {
        color: '#000000',
        fontSize: 16,
        marginTop: 10,
    },
    modalMessage:{
        color:'#8a8a8a',
        fontSize:14,
        margin:10,
    },
    row:{
        flexDirection:'row',
        alignItems:'center',
    },
    horizonLine:{
        backgroundColor:'#8a8a8a',
        height:0.5,

        alignSelf:'stretch'
    },
    verticalLine:{
        backgroundColor:'#9f9fa3',
        width:0.4,
        alignSelf:'stretch'
    },
    leftBn:{
        borderBottomLeftRadius:3,
        padding:7,
        flexGrow:1,
        justifyContent:'center',
        alignItems:'center',
    },
    leftBnText:{
        fontSize:16,
        color:'#00A9F2',
    },
    rightBn:{
        borderBottomRightRadius:3,
        padding:7,
        flexGrow:1,
        justifyContent:'center',
        alignItems:'center',
    },
    rightBnText:{
        fontSize:16,
        color:'#00A9F2'
    }

用法

<AlertDialog title="标题" message="消息"  ref="_customModal" visibility={this.state.modalVisibility}
               buttonName="确定"
               onClick={()=>{
                   Alert.alert('返回!');
                   this.setState({modalVisibility:false})
               }} />