React-Native自定義Alert

自定義Alert

/**
 * Created by wufeng on 2017/1/4.
 */
import React, {
    Component
} from 'react'

import {
    StyleSheet,
    View,
    TouchableOpacity,
    Modal,
    Text,
    ListView,
    PixelRatio,
    Platform,
    Image
} from 'react-native'

import Dimensions from 'Dimensions'
const {width, height} = Dimensions.get('window');

/**
 * 確認(rèn)框
 * 傳過來的參數(shù):
 * {
 *     leftButtonText: '',// 左邊按鈕的文字
 *     onLeftClick: function,// 點(diǎn)擊左邊按鈕的回調(diào)
 *     rightButtonText: '',// 右邊按鈕的文字
 *     onRightClick: function,// 點(diǎn)擊右邊按鈕的回調(diào)
 *     title: "",// 標(biāo)題
 *     message: "",// 提示信息
 * }
 */
export default class AlertModal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
            leftButtonText: props.leftButtonText,
            rightButtonText: props.rightButtonText,
            title: props.title,
            message: props.message,
        }
    }

    componentWillMount() {
    }

    render() {
        return (
            <Modal
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => this.hide(false)}>
                <View style={modalStyle.container}>
                    <View style={modalStyle.dialogContainer}>
                        {this.state.title ?
                            <Text style={modalStyle.dialogTitle}>{this.state.title}</Text> : null
                        }
                        <Text style={[modalStyle.dialogPrompt, this.props.messageStyle]}>{this.state.message}</Text>
                        <View style={modalStyle.buttonContainer}>
                            {this.state.leftButtonText ?
                                <TouchableOpacity
                                    onPress={() => this.props.onLeftClick()}
                                    style={[modalStyle.dialogConfirmButton, modalStyle.leftButton]}>
                                    <Text style={modalStyle.dialogConfirmButtonText}>{this.state.leftButtonText}</Text>
                                </TouchableOpacity>
                                : null
                            }
                            <TouchableOpacity
                                onPress={() => this.props.onRightClick()}
                                style={[modalStyle.dialogConfirmButton, modalStyle.rightButton, this.state.leftButtonText ? {} : modalStyle.leftButton]}>
                                <Text style={modalStyle.dialogConfirmButtonText}>{this.state.rightButtonText}</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }

    setLeftText(leftButtonText) {
        this.setState({
            leftButtonText: leftButtonText
        })
    }

    setRightText(rightButtonText) {
        this.setState({
            rightButtonText: rightButtonText
        })
    }

    setTitle(title) {
        this.setState({
            title: title
        })
    }

    setMessage(message) {
        this.setState({
            message: message
        })
    }

    /**
     * 顯示
     */
    show() {
        this.setState({
            modalVisible: true,
        })
    }

    /**
     * 隱藏
     */
    hide() {
        this.setState({
            modalVisible: false,
        })
    }

}

var modalStyle = StyleSheet.create({
    container: {
        width: width,
        height: height,
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    dialogContainer: {
        marginLeft: 30,
        marginRight: 30,
        borderTopLeftRadius:8,
       borderTopRightRadius:8,
        backgroundColor: 'white',
    },
    dialogTitle: {
        fontSize: 16,
        paddingLeft: 20,
        paddingRight: 20,
        textAlign: 'center',
        marginTop:15,
        marginBottom: -12,
        marginLeft:10,
        marginRight:10,
        fontWeight:'900',
        color:'#333333',
    },
    dialogPrompt: {
        fontSize: 14,
        marginTop: 16,
        marginBottom: 16,
        alignSelf: 'center',
        marginLeft:29,
        marginRight:29,
        fontWeight:'100',
        lineHeight:22,
        color:'black',
        textAlign:'center',
    },
    buttonContainer: {
        flexDirection: 'row',
        flex: 1,
    },
    dialogConfirmButton: {
        height: 44,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        flex: 1,
        borderWidth: 1 / PixelRatio.get(),
        borderColor: '#aaaaaa',
    },
    leftButton: {
        borderBottomLeftRadius: 8,
        marginRight: -(1 / PixelRatio.get()),
        borderRightWidth: 0
    },
    rightButton: {
        borderBottomRightRadius: 8,
    },
    buttonVerticalLine: {
        backgroundColor: '#aaaaaa',
        width: 1,
    },
    buttonHorizontalLine: {
        backgroundColor: '#aaaaaa',
        height: 1,
    },
    dialogConfirmButtonText: {
        color: '#007aff',
        fontSize: 16,
    }
});

              <AlertModal
                    ref={AlertModal => this.AlertModal = AlertModal}
                    message='這是一個自定義彈窗'
                    title = '11111'
                    rightButtonText='確定'
                    //leftButtonText='取消'
                    onRightClick={()=>{
                        this.AlertModal.hide();
                        this.AlertModal.setTitle('haha');
                    }}
                    onLeftClick={()=>{
                        this.AlertModal.hide();
                    }}
                />

              <TouchableOpacity onPress={() => {
                    this.AlertModal.show();
                }} style={{marginTop:30}}>
                    <Text style={{fontSize:20}}>彈出Modal</Text>
                </TouchableOpacity>

      </View>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市爷恳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌濒析,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件硕勿,死亡現(xiàn)場離奇詭異和橙,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)裂垦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來肌索,“玉大人蕉拢,你說我怎么就攤上這事〕涎牵” “怎么了晕换?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長站宗。 經(jīng)常有香客問我闸准,道長,這世上最難降的妖魔是什么梢灭? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任夷家,我火速辦了婚禮蒸其,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘库快。我一直安慰自己摸袁,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布义屏。 她就那樣靜靜地躺著靠汁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪闽铐。 梳的紋絲不亂的頭發(fā)上蝶怔,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機(jī)與錄音阳啥,去河邊找鬼。 笑死财喳,一個胖子當(dāng)著我的面吹牛察迟,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播耳高,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼扎瓶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了泌枪?” 一聲冷哼從身側(cè)響起概荷,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎碌燕,沒想到半個月后误证,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡修壕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年愈捅,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片慈鸠。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡蓝谨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出青团,到底是詐尸還是另有隱情譬巫,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布督笆,位于F島的核電站芦昔,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏娃肿。R本人自食惡果不足惜烟零,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一瘪松、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧锨阿,春花似錦宵睦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至末早,卻和暖如春烟馅,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背然磷。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工郑趁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人姿搜。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓寡润,卻偏偏與公主長得像,于是被迫代替她去往敵國和親舅柜。 傳聞我的和親對象是個殘疾皇子梭纹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容