消息框, 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 是对象数组。