/*弹出层测试*/
import React,{Component} from 'react';
import {
StyleSheet,
View,
Image,
Text,
TouchableOpacity,
ScrollView,
Navigator,
Alert, //引入Alert组件
TouchableHighlight,
AlertIOS //引入AlertIOS组件
} from 'react-native';
//创建一个组件
class CustomButton extends Component {
render() {
return (
<TouchableHighlight
style={styles.button}
underlayColor="red" //触摸的时候颜色改变
onPress={this.props.onPress}> //当前触发时间
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
//默认输出组件
export default class AlertDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{height:30,color:'black',margin:8}}>
弹出框实例
</Text>
//触发事件
<CustomButton text='点击弹出默认Alert'
onPress={()=>Alert.alert('温馨提醒','确定退出吗?')}
/>
<CustomButton text='点击弹出两个按钮的Alert'
onPress={()=>Alert.alert('温馨提醒','确定退出吗?',[
{text:'取消'},
{text:'确定',}
])}
/>
<CustomButton text='点击弹出三个按钮的Alert'
onPress={()=>AlertIOS.alert('温馨提醒','确定退出吗?',[
{text:'One'},
{text:'Two'},
{text:'Two'},
{text:'Two'},
{text:'Two'},
{text:'Two'},
{text:'Two'},
{text:'Two'},
{text:'Two'},
{text:'Two'},
{text:'Two'},
{text:'Two'},
])}
/>
<CustomButton text='点击出现输入框'
onPress={()=>AlertIOS.prompt('温馨提醒','确定退出吗?',[
{text:'取消'},
{text:'确定',}
])}
/> </View>
);
}
} var styles = StyleSheet.create({
container:{
backgroundColor:"#fff",
flex:1,
marginTop:65,
},
button: {
margin:5,
backgroundColor: 'white',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#cdcdcd',
} })

  

React native 的弹出层(输入)效果的更多相关文章

  1. react学习之弹出层

    react的弹出层不同于以往的DOM编程,我们知道,在DOM中,弹出层事件绑定在对应的节点上即可,但是在react中,往往只能实现父子之间的传递控制,显然,弹出层的层级不符合此关系. 在这里我们需要使 ...

  2. jq原创弹出层折叠效果

    弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: ...

  3. html+javascript实现可拖动可提交的弹出层对话框效果

    本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...

  4. div弹出层的效果带关闭按钮

    下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...

  5. React native 无法弹出调试控件的问题

    React Native 在debug模式下,可以通过摇动手机,弹出调试选项.但是今天利用了cocoapods 把react native 文件整理后,调试界面就弹不出了,其他功能正常.查了好久,发现 ...

  6. jQuery第三课 点击按钮 弹出层div效果

    jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...

  7. Mantis的附件图片实现预览/弹出层动画效果预览图片(LightBox2)的完美解决方案[Z]

    方法1: 在Mantis的配置文件中,加入此句,将这个值设的很大,就可以直接看到图片 1 $g_preview_attachments_inline_max_size=1000000; 效果如图 这个 ...

  8. React/anu实现弹出层2

    这次是使用了一个比较罕见的APIReactDOM.unstable_renderSubtreeIntoContainer,ReactDOM.unstable_renderSubtreeIntoCont ...

  9. jQuery WIN 7透明弹出层效果

    jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...

随机推荐

  1. 关于hg的命令

    整理的创建分支合并一个分支的代码步骤:1.创建一个目录用于作为本地仓库mkdir Center2.将远端代码克隆到本地仓库(这时我的位置在刚创建的Center目录下)hg clone HTTP DIR ...

  2. bzoj1003 物流运输

    Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...

  3. Linux下忘记MySQL的root密码的解决方法

    恢复方法之一 1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也 ...

  4. PHP变量作用域详解(二)

    学过C的人用PHP的时候一般会相当顺手,而且感到PHP太方便太轻松.但在变量作用域这方面却与C有不同的地方,搞不好会相当郁闷,就找不到错误所在.昨晚就与到这么一个问题,是全局变量在函数中的问题.今天搜 ...

  5. 【重点】Shell入门教程:流程控制(2)条件判断的写法

    第三节:条件判断的写法 if条件判断中,if的语法结构中的“条件判断”可以有多种形式.测试结果是真是假,就看其传回的值是否为0. 条件测试的写法,有以下10种: 1.执行某个命令的结果 这里的命令,可 ...

  6. linux常用命令-用户管理命令

    useradd 用户名 passwd 用户名:修改该用户的密码 groupadd 组名 who: 查看现在登录了几个用户,得到的信息含义如下 登录用户名 登录终端 登录时间 登录终端的IP地址(如果没 ...

  7. 使用github pages, hexo搭建个人博客教程

    具体的原理性的东西就不说了直接上教程,怕等下自己忘了. 一. github 阶段 申请一个github 账号并成功登录进去. 创建一个名字为xxx.github.io的空项目. 二. hexo 阶段 ...

  8. java 深入技术二(Collection)

    1. java集合 存储和管理多个java对象 包括很多java类和接口 Collection List                              Set ArrayList  Lin ...

  9. 【目录】 hadoop2.6.0

    hadoop2.6.0 安装+例子运行 数据丢失问题解决 通过代码运行程序流程 利用Hadoop的 Java API 利用JAVA API 实现数据上传

  10. SQL语句汇总

    1.查询出来数据保留小数点2位,并且0.01时候,不会展示为.01. select     to_char(0.1,'fm9999999990.00') from dual; 2.wm_concat ...