```
/**
 * 功能： Confirm對話方塊
 */
/*visible bool 控制彈出框隱藏(false)或顯示(true)
transparent bool 控制彈出框背景，若為false則彈出框背景為灰色，會擋住彈出框後面的內容，true時才為modal根檢視的背景顏色。
animationType string 控制彈出框的動畫效果 有三個值：none slide fade
onRequestClose func 當請求關閉時執行*/
'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 ConfirmDialog extends Component
 
 {
    static propTypes = {
        title:PropTypes.string.isRequired, // 對話方塊標題
        message:PropTypes.string.isRequired, // 對話方塊標題
        buttonLeftName: PropTypes.string.isRequired,  // 按鈕左名字
        buttonRightName: PropTypes.string.isRequired,  // 按鈕右名字
        onLeftPress: PropTypes.func.isRequired,  // 回撥函式左
 

        onRightPress: PropTypes.func.isRequired,  // 回撥函式右
    };
    constructor(props) {
        super(props);

    // 繫結事件
    this._onLeftPress  = this._onLeftPress.bind(this);  // 需要在回撥函式中使用this,必須使用bind(this)來繫結
    this._onRightPress  = this._onRightPress.bind(this);  // 需要在回撥函式中使用this,必須使用bind(this)來繫結
}
_onLeftPress() {
    if (this.props.onLeftPress) {   // 在設定了回撥函式的情況下
        this.props.onLeftPress(this.props.pageName);  // 執行回撥
    }
}
_onRightPress() {
    if (this.props.onRightPress) {   // 在設定了回撥函式的情況下
        this.props.onRightPress(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.onLeftPress}  underlayColor={'#FFFFFF'} >
                            <Text style={Dialog.leftBnText}>{this.props.buttonLeftName}</Text>
                        </TouchableHighlight>
                        <View style={Dialog.verticalLine}/>
                        <TouchableHighlight style={Dialog.rightBn} onPress={this.props.onRightPress} underlayColor={'#FFFFFF'} >
                            <Text style={Dialog.rightBnText}>{this.props.buttonRightName}</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </View>
        </Modal>
    )
}

}

貼出樣式：

container:{
        flex:1,
        backgroundColor:'rgba(0, 0, 0, 0.5)',
        justifyContent:'center',
        alignItems:'center'
    },
    modalContainer: {
        marginLeft: 20,
        marginRight: 20,
        borderRadius: 3,
        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:'#9f9fa3',
        height:0.5,
        alignSelf:'stretch'
    },
    verticalLine:{
        backgroundColor:'#9f9fa3',
        width:1,
        alignSelf:'stretch'
    },
    leftBn:{
        borderBottomLeftRadius:3,
        padding:7,
        flexGrow:1,
        justifyContent:'center',
        alignItems:'center',
    },
    leftBnText:{
        fontSize:16,
        color:'#8a8a8a',
    },
    rightBn:{
        borderBottomRightRadius:3,
        padding:7,
        flexGrow:1,
        justifyContent:'center',
        alignItems:'center',
    },
    rightBnText:{
        fontSize:16,
        color:'#00A9F2'
    }

用法

<ConfirmDialog title="標題" message="訊息"  ref="_customModal" visibility={this.state.modalVisibility}
               buttonLeftName="取消" buttonRightName="確定"
               onLeftPress={()=>{
                   Alert.alert('取消!');
                   this.setState({modalVisibility:false})
               }}

               onRightPress={()=>{
                   Alert.alert('返回!');
                   this.setState({modalVisibility:false})
               }}
/>