React native 的弹出层(输入)效果
- /*弹出层测试*/
- 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 的弹出层(输入)效果的更多相关文章
- react学习之弹出层
react的弹出层不同于以往的DOM编程,我们知道,在DOM中,弹出层事件绑定在对应的节点上即可,但是在react中,往往只能实现父子之间的传递控制,显然,弹出层的层级不符合此关系. 在这里我们需要使 ...
- jq原创弹出层折叠效果
弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: ...
- html+javascript实现可拖动可提交的弹出层对话框效果
本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...
- div弹出层的效果带关闭按钮
下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...
- React native 无法弹出调试控件的问题
React Native 在debug模式下,可以通过摇动手机,弹出调试选项.但是今天利用了cocoapods 把react native 文件整理后,调试界面就弹不出了,其他功能正常.查了好久,发现 ...
- jQuery第三课 点击按钮 弹出层div效果
jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...
- Mantis的附件图片实现预览/弹出层动画效果预览图片(LightBox2)的完美解决方案[Z]
方法1: 在Mantis的配置文件中,加入此句,将这个值设的很大,就可以直接看到图片 1 $g_preview_attachments_inline_max_size=1000000; 效果如图 这个 ...
- React/anu实现弹出层2
这次是使用了一个比较罕见的APIReactDOM.unstable_renderSubtreeIntoContainer,ReactDOM.unstable_renderSubtreeIntoCont ...
- jQuery WIN 7透明弹出层效果
jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...
随机推荐
- poj1399 hoj1037 Direct Visibility 题解 (宽搜)
http://poj.org/problem?id=1399 http://acm.hit.edu.cn/hoj/problem/view?id=1037 题意: 在一个最多200*200的minec ...
- pyquery的问题
在使用pyquery时发现一些问题, 1.爬取的html中如果有较多的错误时,不能很好的补全. 2.如果要获取某个class中的内容时,如果内容太多不能取完整!只能取一部分. 这个在现在的最新版本中还 ...
- solr多条件查询(四)
上面讲到比较烦琐,如果这个不好理解,可以直接用sorl的多条件过滤addFilterQuery();方法
- JavaScript对象的理解 及 字面量对象与数组的关系
JavaScript的简单类型包括 数字.字符串.布尔值.null值.undefined值. 其他的值都是对象.对象是可变的键控集合.数组.函数.正则表达式都是对象. 对象是属性的容器,属性都是名字和 ...
- MySQL 关联表批量修改(数据同步)
update table1 t1 ,table2 t2 set t1.field1 = t2.field2 where t1.id = t2.id
- Linux下查看操作系统信息、内存情况及cpu信息:cpu个数、核心数、线程数
1.查看物理CPU的个数 [root@MysqlCluster01 ~]# cat /proc/cpuinfo |grep "physical id"|sort |uniq|wc ...
- Mac Pro 编译安装 Redis-3.2.3
Redis官方下载地址:http://redis.io/download Redis安装 cd /usr/local/src/redis-3.2.3 sudo make sudo make insta ...
- jvm七种垃圾收集器
JVM_七种垃圾收集器介绍 本文中的垃圾收集器研究背景为:HotSpot+JDK7 一.垃圾收集器概述 如上图所示,垃圾回收算法一共有7个,3个属于年轻代.三个属于年老代,G1属于横跨年轻代和年老 ...
- 机器学习 k-临近算法
程序清单一: from numpy import * import operator def creatDataSet(): group = array([[1.0,1.1],[1.0,1.0],[0 ...
- linux source
清华TUNA镜像源https://mirrors.tuna.tsinghua.edu.cn/ 中科大USTC镜像源 https://mirrors.ustc.edu.cn/ ali http://mi ...