RN-Alert

消息框, 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 是对象数组。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,705评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,261评论 4 61
  • 八月树上的花 摇摇; 浪里小船的角 摇摇; 云间绵绵的风 摇摇 水上浅浅的桥 摇摇 塔尖闪烁的光 摇摇 姑娘脸上的...
    Bellis漫漫阅读 294评论 0 0
  • 写在开头--什么是kotlin和为什么学习kotlin大家自行google 1.创建新项目(基于android s...
    EricZhangGl阅读 449评论 0 1
  • 北京一日游骗局 第三次去北京了,还是被骗了。9月23日晚坐火车跟舍友去北京,第二天早上5点半到北京,一出火车站口,...
    闲下来谈谈阅读 8,686评论 4 0