消息框, ReactNative 提供了 Alert/AlertIOS

一、 AlertIOS

只適用于iOS設備， 提供的功能比Alert組件會更多

1 對畫框類型

* alert(title, message, buttons)：普通的消息提示對話框。其中 buttons 是對象數組。
* prompt(title, value, buttons)：提供可輸入的對話框。其中 buttons 是對象數組。

2 對話框樣式

* 如果沒有設置 buttons 數組，AlertIOS 組件默認會有一個“確認”按鈕。
* 默認情況下，buttons 數組的最后一個按鈕會高亮顯示。
* 如果數組的長度過長按鈕就會垂直排列。

3 代碼效果

/**
 * Created by licc on 2017/7/9.
 */

import React, {Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    AlertIOS
} from 'react-native';
import NavigationBar from './NavigationBar'

export default class AlertExample extends Component {

    render(){
        return(
            <View style={styles.container}>
                <NavigationBar
                    title={'AlertIOS'}
                    statusBar={{backgroundColor:'blue'}}
                />
                <Text style={styles.item} onPress={this.doTip.bind(this)}>提示對話框</Text>
                <Text style={styles.item} onPress={this.doInput.bind(this)}>輸入對話框</Text>
                <Text style={styles.item} onPress={this.doInputSecure.bind(this)}>輸入密碼</Text>
                <Text style={styles.item} onPress={this.doLogin.bind(this)}>登錄框</Text>
            </View>
        );
    }

    doTip(){
        AlertIOS.alert('提示', '歡迎您來到ReactNative世界', [
            {
                text:'取消',
                onPress:()=>{
                    console.log('點擊取消按鈕');
                }
            },
            {
                text:'確認',
                onPress:()=>{
                    console.log('點擊確認按鈕');
                }
            },

        ]);
    }

    doInput(){
        AlertIOS.prompt('提示', '請輸入內容....', [

            {
                text:'取消',
                onPress:()=>{
                    console.log('點擊取消按鈕');
                }
            },
            {
                text:'確認',
                onPress:()=>{
                    console.log('點擊確認按鈕');
                }
            },
        ]);
    }

    doInputSecure(){

        AlertIOS.prompt('Secure Text', null, null, 'secure-text');
    }

    doLogin(){
        AlertIOS.prompt('Login & Password', null, null, 'login-password');
    }

}

const styles = StyleSheet.create({

    container:{
      flex:1
    },

    item:{
        marginTop:10,
        marginLeft:5,
        marginRight:5,
        height:30,
        borderWidth:1,
        padding:6,
        borderColor:'#ddd',
        textAlign:'center'
    },
});

二 Alert

Alert 組件是 iOS 設備和 Android 設備都通用的。不過它只有一個普通的消息提示對話框類型。
Alert 方法的用法和 AlertIOS 組件是一樣的

* alert(title, message, buttons)：普通的消息提示對話框。其中 buttons 是對象數組。