/*弹出层测试*/
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. M端总结

    最近在项目开发过程中涉及到了移动端,现在对此进行总结. 在此次M端的开发过程中,遇到了许多问题,在此进行一次总结,希望大家在以后的开发过程中能尽量规避类似的问题,提高开发效率和代码质量.一.布局1.移 ...

  2. ArcGIS ElementLayer上放置Windows控件

    ElementLayer是ArcGIS API for Silverlight/WPF中的一种图层类型,主要用来承载Silverlight/WPF中的UIElement对象(UIElement),使用 ...

  3. NEC学习 ---- 模块 -文本圆角背景导航

    下图是效果图: 然后, 左右两边的圆角图片和背景图片如下 (因为截图工具的原因, 可能图片不是很清晰. 这个图片有4个部分, 分别是中间的背景图, 左右圆角以及栏目分隔白线) 思路: 利用inline ...

  4. iOS添加Prefix Header

    1. 添加Prefix Header 注: Xcode 6苹果默认去掉prefix Header, 用以提高原文件的复用性, 便于迁移. 并且可以一定程度上减少Build Time. 解决办法: (1 ...

  5. My97 DatePicker使用之自定义事件

    参考网站:http://www.my97.net/dp/demo/resource/2.5.asp 自定义事件 如果你需要做一些附加的操作,你也不必担心,日期控件自带的自定义事件可以满足你的需求.此外 ...

  6. [Mugeda HTML5技术教程之13]链接的添加方式

    在广告主的需求中,有很多情况下需要在动画中添加一些外部链接.这份文档就在Mugeda动画中添加外部链接的方式,做一下梳理. 1.通过点击触发的链接 就是要用户点击屏幕来触发链接的情况,这是推荐使用的方 ...

  7. WPF的数据绑定详细介绍

    数据绑定:是应用程序 UI 与业务逻辑之间建立连接的过程. 如果绑定正确设置并且数据提供正确通知,则当数据的值发生更改时,绑定到数据的视觉元素会自动反映更改. 数据绑定可能还意味着如果视觉元素中数据的 ...

  8. 命令行参数解析:getopt,getopt_long

    #include <unistd.h> int getopt(int argc, char * const argv[], const char *optstring); extern c ...

  9. javascript 之 第七章第三节(this关键字)

    该章节将从以下几个方面来谈论ths的使用环境. 1/this和构造器 2/this和对象 3/this和函数 4/全局环境的this 5/this和DOM/事件 7/me/self/that/_thi ...

  10. &lt;笔记&gt;三码合一

    讲求三码合一,何为三码合一?(这里我用UTF8讲例子) 就是页面编码,文档编码,数据库编码要统一一种格式,切记不可有的是GBK,有的是UFT8 页面编码:也就是用header 函数申明:header( ...