1. /*弹出层测试*/
  2. import React,{Component} from 'react';
  3. import {
  4. StyleSheet,
  5. View,
  6. Image,
  7. Text,
  8. TouchableOpacity,
  9. ScrollView,
  10. Navigator,
  11. Alert, //引入Alert组件
  12. TouchableHighlight,
  13. AlertIOS //引入AlertIOS组件
  14. } from 'react-native';
  15. //创建一个组件
  16. class CustomButton extends Component {
  17. render() {
  18. return (
  19. <TouchableHighlight
  20. style={styles.button}
  21. underlayColor="red" //触摸的时候颜色改变
  22. onPress={this.props.onPress}> //当前触发时间
  23. <Text style={styles.buttonText}>{this.props.text}</Text>
  24. </TouchableHighlight>
  25. );
  26. }
  27. }
  28. //默认输出组件
  29. export default class AlertDemo extends Component {
  30. render() {
  31. return (
  32. <View style={styles.container}>
  33. <Text style={{height:30,color:'black',margin:8}}>
  34. 弹出框实例
  35. </Text>
  36. //触发事件
  37. <CustomButton text='点击弹出默认Alert'
  38. onPress={()=>Alert.alert('温馨提醒','确定退出吗?')}
  39. />
  40. <CustomButton text='点击弹出两个按钮的Alert'
  41. onPress={()=>Alert.alert('温馨提醒','确定退出吗?',[
  42. {text:'取消'},
  43. {text:'确定',}
  44. ])}
  45. />
  46. <CustomButton text='点击弹出三个按钮的Alert'
  47. onPress={()=>AlertIOS.alert('温馨提醒','确定退出吗?',[
  48. {text:'One'},
  49. {text:'Two'},
  50. {text:'Two'},
  51. {text:'Two'},
  52. {text:'Two'},
  53. {text:'Two'},
  54. {text:'Two'},
  55. {text:'Two'},
  56. {text:'Two'},
  57. {text:'Two'},
  58. {text:'Two'},
  59. {text:'Two'},
  60. ])}
  61. />
  62. <CustomButton text='点击出现输入框'
  63. onPress={()=>AlertIOS.prompt('温馨提醒','确定退出吗?',[
  64. {text:'取消'},
  65. {text:'确定',}
  66. ])}
  67. />
  68.  
  69. </View>
  70. );
  71. }
  72. }
  73.  
  74. var styles = StyleSheet.create({
  75. container:{
  76. backgroundColor:"#fff",
  77. flex:1,
  78. marginTop:65,
  79. },
  80. button: {
  81. margin:5,
  82. backgroundColor: 'white',
  83. padding: 15,
  84. borderBottomWidth: StyleSheet.hairlineWidth,
  85. borderBottomColor: '#cdcdcd',
  86. }
  87.  
  88. })

  

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. poj1399 hoj1037 Direct Visibility 题解 (宽搜)

    http://poj.org/problem?id=1399 http://acm.hit.edu.cn/hoj/problem/view?id=1037 题意: 在一个最多200*200的minec ...

  2. pyquery的问题

    在使用pyquery时发现一些问题, 1.爬取的html中如果有较多的错误时,不能很好的补全. 2.如果要获取某个class中的内容时,如果内容太多不能取完整!只能取一部分. 这个在现在的最新版本中还 ...

  3. solr多条件查询(四)

    上面讲到比较烦琐,如果这个不好理解,可以直接用sorl的多条件过滤addFilterQuery();方法

  4. JavaScript对象的理解 及 字面量对象与数组的关系

    JavaScript的简单类型包括 数字.字符串.布尔值.null值.undefined值. 其他的值都是对象.对象是可变的键控集合.数组.函数.正则表达式都是对象. 对象是属性的容器,属性都是名字和 ...

  5. MySQL 关联表批量修改(数据同步)

    update table1 t1 ,table2 t2 set t1.field1 = t2.field2 where t1.id = t2.id

  6. Linux下查看操作系统信息、内存情况及cpu信息:cpu个数、核心数、线程数

    1.查看物理CPU的个数 [root@MysqlCluster01 ~]# cat /proc/cpuinfo |grep "physical id"|sort |uniq|wc ...

  7. 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 ...

  8. jvm七种垃圾收集器

    JVM_七种垃圾收集器介绍   本文中的垃圾收集器研究背景为:HotSpot+JDK7 一.垃圾收集器概述 如上图所示,垃圾回收算法一共有7个,3个属于年轻代.三个属于年老代,G1属于横跨年轻代和年老 ...

  9. 机器学习 k-临近算法

    程序清单一: from numpy import * import operator def creatDataSet(): group = array([[1.0,1.1],[1.0,1.0],[0 ...

  10. linux source

    清华TUNA镜像源https://mirrors.tuna.tsinghua.edu.cn/ 中科大USTC镜像源 https://mirrors.ustc.edu.cn/ ali http://mi ...