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 ...
随机推荐
- 关于hg的命令
整理的创建分支合并一个分支的代码步骤:1.创建一个目录用于作为本地仓库mkdir Center2.将远端代码克隆到本地仓库(这时我的位置在刚创建的Center目录下)hg clone HTTP DIR ...
- bzoj1003 物流运输
Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...
- Linux下忘记MySQL的root密码的解决方法
恢复方法之一 1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也 ...
- PHP变量作用域详解(二)
学过C的人用PHP的时候一般会相当顺手,而且感到PHP太方便太轻松.但在变量作用域这方面却与C有不同的地方,搞不好会相当郁闷,就找不到错误所在.昨晚就与到这么一个问题,是全局变量在函数中的问题.今天搜 ...
- 【重点】Shell入门教程:流程控制(2)条件判断的写法
第三节:条件判断的写法 if条件判断中,if的语法结构中的“条件判断”可以有多种形式.测试结果是真是假,就看其传回的值是否为0. 条件测试的写法,有以下10种: 1.执行某个命令的结果 这里的命令,可 ...
- linux常用命令-用户管理命令
useradd 用户名 passwd 用户名:修改该用户的密码 groupadd 组名 who: 查看现在登录了几个用户,得到的信息含义如下 登录用户名 登录终端 登录时间 登录终端的IP地址(如果没 ...
- 使用github pages, hexo搭建个人博客教程
具体的原理性的东西就不说了直接上教程,怕等下自己忘了. 一. github 阶段 申请一个github 账号并成功登录进去. 创建一个名字为xxx.github.io的空项目. 二. hexo 阶段 ...
- java 深入技术二(Collection)
1. java集合 存储和管理多个java对象 包括很多java类和接口 Collection List Set ArrayList Lin ...
- 【目录】 hadoop2.6.0
hadoop2.6.0 安装+例子运行 数据丢失问题解决 通过代码运行程序流程 利用Hadoop的 Java API 利用JAVA API 实现数据上传
- SQL语句汇总
1.查询出来数据保留小数点2位,并且0.01时候,不会展示为.01. select to_char(0.1,'fm9999999990.00') from dual; 2.wm_concat ...