【React Native】手写Alert弹窗（单按钮，两个按钮）

　　1、实例代码：

import React, {Component} from 'react';
import PropTypes from 'prop-types';

import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    Modal
} from 'react-native';

let {width, height} = Dimensions.get("window");

export default class CustomComponent extends Component {

    static propTypes = {
        isShow: PropTypes.bool.isRequired, //控制视图是否显示，必需
        title: PropTypes.string,           //标题,可选
        message: PropTypes.string,         //文本内容，可选
        rightButton: PropTypes.object,     //底部右边按钮
        leftButton: PropTypes.object       //底部右边按钮
    }

    //蒙层背景
    renderMongoliaView() {
        return (
            
        );
    }

    // 标题
    renderTitle() {
        return (
            
                {this.props.title}
        )
    }

    // 详情
    renderMessage() {
        return (
            
                {this.props.message}
        )
    }

    // 按钮
    renderBottomBtns() {
        let {leftButton, rightButton} = this.props

        let leftBtnText = leftButton && leftButton.text,
            leftBtnTextStyle = leftButton && leftButton.textStyle,
            leftBtnAction = leftButton && leftButton.onPress;

        let rightBtnText = rightButton && rightButton.text,
            rightBtnTextStyle = rightButton && rightButton.textStyle,
            rightBtnAction = rightButton && rightButton.onPress;

        if (leftBtnText && leftBtnText.length && rightBtnText && rightBtnText.length) {
            return (
                
                     {
                        leftBtnAction && leftBtnAction()
                    }}
                                      style={styles.btnStyle}>
                        {[{
                            fontSize: 16,
                            color: '#3981FD',
                            fontWeight: 'bold'
                        }, leftBtnTextStyle]}>{leftBtnText}
                    
                    
                     {
                        rightBtnAction && rightBtnAction()
                    }}
                                      style={styles.btnStyle}>
                        {rightBtnText}
                    
                
            )
        } else {
            let text = leftBtnText;
            let click = leftBtnAction;
            let textStyle = leftBtnTextStyle

            if (rightBtnText && rightBtnText.length) {
                text = rightBtnText
                click = rightBtnAction
                textStyle = rightBtnTextStyle
            }
            if (!text || text.length === 0) {
                text = '确定'
            }
            return (
                
                     {
                        click && click()
                    }}
                                      style={styles.btnStyle}>
                        {text}
                    

                
            )
        }
    }

    // 绘制Alert视图
    renderAlertView() {
        let {title, message} = this.props
        return (
            
                
                    
                        {
                            (title && title.length)
                                ?
                                this.renderTitle()
                                :
                                null
                        }
                        {
                            (message && message.length)
                                ?
                                this.renderMessage()
                                :
                                null
                        }
                    
                    
                    {this.renderBottomBtns()}
                
            
        );
    }

    render() {
        if (!this.props.isShow) {
            return null;
        }
        return (
            true} onRequestClose={() => {
            }}>
                {
                    this.renderMongoliaView()
                }
                {
                    this.renderAlertView()
                }
            
        )
    }
}

const styles = StyleSheet.create({
    containerStyle: {
        bottom: 0,
        top: 0,
        position: 'absolute',
        justifyContent: 'center',
        alignItems: 'center',
        width: width
    },
    bgContainViewStyle: {
        top: 0,
        width: width,
        position: 'absolute',
        opacity: 0.4,
        backgroundColor: 'rgb(0,0,0)',
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center'
    },
    alertViewStyle: {
        backgroundColor: 'white',
        borderRadius: 10,
        marginLeft: 50,
        marginRight: 50,
        position: 'absolute',
        maxHeight: height - 40
    },
    titleContainerStyle: {
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: 15,
        marginRight: 15,
        marginBottom: 10,
    },
    titleStyle: {
        fontSize: 17,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#333333'
    },
    contentContainerStyle: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    contentStyle: {
        justifyContent: 'center',
        marginLeft: 20,
        marginRight: 20,
        fontSize: 14,
        textAlign: 'center',
        color: '#666666',
    },
    horizontalLineStyle: {
        height: 0.5,
        backgroundColor: 'lightgrey'
    },
    btnContainerStyle: {
        flexDirection: 'row',
        width: width - 100,
        height: 48
    },
    verticalLineStyle: {
        height: 48,
        backgroundColor: 'lightgrey',
        width: 0.5
    },
    btnStyle: {
        flex: 1,
        height: 47,
        justifyContent: 'center',
        alignItems: 'center'
    },

})

自定义Alert

 　　2.1弹出单个按钮

renderFocusTip() {
        const {isShowAlert} = this.state;
        return (
            {isShowAlert}
                       title={'版本提示'}
                       message={'请更新到最新版，方可继续进行！'}
                       leftButton={{
                           'text': '更新', onPress: () => {
                               this.open()
                           }
                       }}
            />
        );
    }

　　2.2弹出两个按钮

renderAlertView() {
        if (!this.state.isShowAlert) return null;

        // const {content} = this.state.popContent || {}
        let leftButton = {
            text: '取消', onPress: () => {
                this.setState({
                    isShowAlert: false
                })
            },
            textStyle: {
                fontWeight: 'normal'
            }
        };
        let rightButton = {
            text: '更新', onPress: () => {
                this.open()
            }
        }
        return (
            this.state.isShowAlert}
                       message={"是否更新到最新版本？" || ''}
                       leftButton={leftButton}
                       rightButton={rightButton}/>
        )
    }

　　3、在需要的实例中引用

render() {
        return (
            
    
                    {this.renderFocusTip()}
                    {/*{this.renderAlertView()}*/}
                
        );
    }
    

　　4、附：在app内打开外连接

　　首先引入组件

import {
    ...
    Linking
} from 'react-native';

　　使用：

open=()=>{
        let url = 'http://www.baidu.com';
        Linking.openURL(url)
    }