ReactNative Alert详解及实例代码

Alert顾名思义一就是一个警告框，一般使用情况比如：退出登录，清楚缓存，提示修改密码等等。。。ReactNative中的Alert只有一个静态方法alert()其中有四个参数：标题，信息，按钮和按钮类型 在Android按钮至多有三个 下面是使用情况：

实例代码：

/**
 * Created by Administrator on 2016/9/12.
 */
import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Alert,
} from 'react-native';

class AlertG extends Component {
  render() {
    return (

      <View style={{flex: 1}}>
        <Text
          style={styles.text}
          onPress={()=> this.showOneAlert()}>One</Text>
        <Text
          style={styles.text}
          onPress={()=> this.showTwoAlert()}>Two</Text>
        <Text
          style={styles.text}
          onPress={()=> this.showThreeAlert()}>Three</Text>
      </View>

    )
  }

  showOneAlert() {
    Alert.alert(
      'Alert 标题',
      '只有一个按钮',
      [
        /**
         * 注意参数名字一定不能错
         */
        {text: '确定', onPress: ()=> console.log('点击确定')}
      ]);
  }

  showTwoAlert() {
    Alert.alert(
      'Alert 标题',
      '两个按钮',
      [
        {text: '确定', onPress: ()=> console.log('点击确定')},
        {text: '取消', onPress: ()=> console.log('点击取消')}
      ]
    );
  }

  showThreeAlert() {
    Alert.alert(
      'Alert 标题',
      '三个按钮',
      [
        //第一个和第二个按钮的位置会颠倒
        {text: '取消', onPress: ()=> console.log('点击取消')},
        {text: '确定', onPress: ()=> console.log('点击确定')},
        {text: '稍后', onPress: ()=> console.log('点击稍后')},
      ]
    );
  }
}

const styles = StyleSheet.create({
  text: {
    fontSize: 28
  }
})

module.exports = AlertG;

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • Android React Native原生模块与JS模块通信的方法总结

    Android React Native原生模块与JS模块通信的方法总结 前言: 在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递,这篇文章将向大家分享原生模块向JS传递数据的几种方式. 方式一:通过Callbacks的方式 说起Callbacks大家都不陌生,它是最常用的设计模式之一.无论是Java,Object-c,C#,还是JavaScript等都会看到Callbacks的身影. 原生模块支持Callbacks类型的参数,该Callbacks对应JS中的f

  • ReactNative页面跳转实例代码

    ReactNative页面跳转实例代码

    效果图如下所示: 进入工作目录,运行 react-native init NavigatorProject 创建项目NavigatorProject import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableHighlight, Image, Navigator } from 'react-native'; class navigatorProject exte

  • ReactNative-JS 调用原生方法实例代码

    ReactNative-JS 调用原生方法实例代码

    第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule package com.mixture; import android.content.Context; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule

  • ReactNative (API)AsyncStorage存储详解及实例

    ReactNative (API)AsyncStorage存储详解及实例

    AsyncStorage存储类似Android中的sharedpreference存储或者IOS中的NSDefaultUser不过ReactNative中的AsyncStorage只能存储字符串类型 常用方法: getItem(key:string,callback?:?(error:?Error,result:?string)=>void) 静态方法,该通过key字段来进行查询存储的数据,把该结果值作为参数传入第二个callback方法.如果发生错误,会把Error对象传入callback方法

  • ReactNative Alert详解及实例代码

    ReactNative Alert详解及实例代码

    Alert顾名思义一就是一个警告框,一般使用情况比如:退出登录,清楚缓存,提示修改密码等等...ReactNative中的Alert只有一个静态方法alert()其中有四个参数:标题,信息,按钮和按钮类型 在Android按钮至多有三个 下面是使用情况: 实例代码: /** * Created by Administrator on 2016/9/12. */ import React, {Component} from 'react'; import { StyleSheet, View, T

  • JS 实现计算器详解及实例代码（一）

    JS 实现计算器详解及实例代码（一）

    Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板

  • MyBatis获取数据库自生成的主键Id详解及实例代码

    MyBatis获取数据库自生成的主键Id详解及实例代码 在使用MySQL数据库时我们一般使用数据库的自增主键自动产生主键.如果在插入主表时,我们需要同时插入从表的数据,这时我们通常需要知道主表插入时自动产生的主键Id值. 下面介绍使用MyBatis进行插入时,如何同时获取数据库自生成的主键: 1.XML配置文件 <insert id="insert" parameterType="Person" useGeneratedKeys="true"

  • MySQL 序列 AUTO_INCREMENT详解及实例代码

    MySQL 序列 AUTO_INCREMENT详解及实例代码 MySQL序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想实现其他字段也实现自动增加,就可以使用MySQL序列来实现. 本章我们将介绍如何使用MySQL的序列. 使用AUTO_INCREMENT MySQL中最简单使用序列的方法就是使用 MySQL AUTO_INCREMENT 来定义列. 实例 以下实例中创建了数据表insect, insect中id无需指定值可实现自动增长. mysql>

  • Java 两种延时thread和timer详解及实例代码

    Java 两种延时thread和timer详解及实例代码 在Java中有时候需要使程序暂停一点时间,称为延时.普通延时用Thread.sleep(int)方法,这很简单.它将当前线程挂起指定的毫秒数.如 try { Thread.currentThread().sleep(1000);//毫秒 } catch(Exception e){} 在这里需要解释一下线程沉睡的时间.sleep()方法并不能够让程序"严格"的沉睡指定的时间.例如当使用5000作为sleep()方法的参数时,线 程

  • Spring组件自动扫描详解及实例代码

    Spring组件自动扫描详解及实例代码 问题描述 一个系统往往有成千上万的组件,如果需要手动将所有组件都纳入spring容器中管理,是一个浩大的工程. 解决方案 Spring 提供组件扫描(component scanning)功能.它能从classpath里自动扫描.侦测和实例化具有特定注解的组件.基本的注解是@Component,它标识一个受Spring管理的组件.其他特定的注解有@Repository.@Service和@Controller,它们分别标识了持久层.服务处和表现层的组件.

  • Java中自定义异常详解及实例代码

    Java中自定义异常详解及实例代码 下面做了归纳总结,欢迎批评指正 自定义异常 class ChushulingException extends Exception { public ChushulingException(String msg) { super(msg); } } class ChushufuException extends Exception { public ChushufuException(String msg) { super(msg); } } 自定义异常 En

  • Spring AOP 基于注解详解及实例代码

    Spring AOP  基于注解详解及实例代码 1.启用spring对@AspectJ注解的支持: <beans xmlns:aop="http://www.springframework.org/schema/aop"...> <!--启动支持--> <aop:aspectj-autoproxy /> </beans> 也可以配置AnnotationAwareAspectJAutoProxyCreator Bean来启动Spring对@

  • java多线程编程技术详解和实例代码

     java多线程编程技术详解和实例代码 1.   Java和他的API都可以使用并发. 可以指定程序包含不同的执行线程,每个线程都具有自己的方法调用堆栈和程序计数器,使得线程在与其他线程并发地执行能够共享程序范围内的资源,比如共享内存,这种能力被称为多线程编程(multithreading),在核心的C和C++语言中并不具备这种能力,尽管他们影响了JAVA的设计. 2.   线程的生命周期 新线程的生命周期从"新生"状态开始.程序启动线程前,线程一直是"新生"状态:

  • java 单播、广播、组播详解及实例代码

    java 单播.广播.组播详解及实例代码 在当前网络通信中(TCP/IP也不例外)有三种通信模式:单播.广播.组播(又叫多播, 个人感觉叫多播描述的有点不恰当),其中多播出现的时间最晚,但同时具备单播和广播的优点,最具有发展前景. 一.通信方式分类: 1.单播:单台主机与单台主机之间的通信: 2.广播:单台主机与网络中所有主机的通信: 3.组播:单台主机与选定的一组主机的通信: 二.单播:    单播是网络通信中最常见的,网络节点之间的通信 就好像是人们之间的对话一样.如果一个人对另外一个人说话

随机推荐