React Native登录注册页面实现空白处收起键盘
其实很简单,直接使用ScrollView作为父视图即可。有木有很神奇啊,以前都还不知道呢。。。。。?
效果截图如下:
看代码:
render() {return (<ScrollView><View style={[styles.itemViewStyle,{marginLeft: 10}]}><Image source={require('./../../Images/icon_phone.png')}style={styles.tipImageStyle}></Image><TextInputstyle={styles.TextInputStyle}onChangeText={(text) => this.setState({telephone: text})}value={this.state.telephone}// 这两个属性只有android能用inlineImageLeft={require('./../../Images/ic_template_default.png')}inlineImagePadding={10}placeholder='手机号'></TextInput></View><View style={[styles.itemViewStyle,{marginLeft: 10, marginTop: 10}]}><Image source={require('./../../Images/icon_password.png')}style={styles.tipImageStyle}></Image><TextInputstyle={styles.TextInputStyle}// onChangeText={(text) => this.setState({telephone: text})}// value={this.state.telephone}inlineImageLeft={require('./../../Images/ic_template_default.png')}placeholder='验证码'>{/*<TouchableOpacityactiveOpacity={0.75}style={styles.fetchVerifyCodeStyle}onPress={this.fetchVerifyCodeAction.bind(this)}><Text style={{fontSize: 16, color: 'white'}}>获取验证码</Text></TouchableOpacity>*/}</TextInput><LCCountDownButton frameStyle={styles.countDownStyle}beginText='获取验证码'endText='再次获取验证码'count={60}pressAction={()=>{this.countDownButton.startCountDown()}}changeWithCount={(count)=> count + 's后重新获取'}id='register' ref={(e)=>{this.countDownButton=e}}/></View><View style={{marginTop: 20}}><Text style={{textAlign: 'center', fontSize: 13, color: 'gray'}}>仅支持中国大陆手机号注册,港,澳,台及海外用户请使用邮箱</Text></View><TouchableOpacityactiveOpacity={0.75}style={styles.registerBtnStyle}onPress={this.nextAction.bind(this)}><Text style={{fontSize: 16, color: 'white'}}>下一步</Text></TouchableOpacity></ScrollView>);}
项目Github地址:
https://github.com/PengSiSi/React-Native-PSShiWuKu.git
转载于:https://www.cnblogs.com/pengsi/p/7681961.html
React Native登录注册页面实现空白处收起键盘相关推荐
- jsf登录注册页面_您将在下一个项目中使用JSF吗?
jsf登录注册页面 上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
- 番茄闹钟三(登录注册页面)
一. axios 配置需求 axios 文档 配置 axios 配置 appid 和 appsecret 配置 gwt 验证的 gwt token 二. 安装 axios yarn add axios ...
- php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
- 清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...
- JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结 一.环境准备与开发工具 二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
- php and mysql登录注册页面
本文将基于PHP以及mysql设计一个最最基础的登录注册页面,所用到的软件有wampserver以及各种PHP编译器,我选择的是,vscode. 第一部分先写个连接数据库文件. conn.php &l ...
- 【原型制作】无素材-纯原生制作-登录注册页面原型图
有一段时间没有做过原型图了,现在因为项目需要,得做一套完整的原型图,由于时间关系,考虑制作低保真的原型,虽然低保,还是得抓一把细节,嘻嘻,在这里记录下登录注册页面纯原生做法的全过程. 工具:Axure ...
- 登录注册页面,JS判断用户手机号码是否已经存在,或者格式不正确
现在的网站使用手机号码注册的越来越多,这就涉及到要在登录注册页面,判断用户手机号码是否已经存在,或者格式不正确,最近的系统里面正好遇到了,已经实现成功,在这里记录一下 如果电话号码已经存在,页面: 如 ...
- 登录注册页面的示例代码
下面是使用Vue3和element-plus写登录注册页面的示例代码: 首先,在main.js文件中引入Vue和element-plus组件库: import { createApp } from ' ...
最新文章
- Python(Dict和Set类型)
- 网页制作遵循四大原则让网站建设更加优质
- 一个基于Python2.7的智慧校园系统
- python递归详解_Python理解递归的方法总结
- CPU缓存一致性协议MESI - 笔记
- 哥尼斯堡的“七桥问题” (25 分)【欧拉回路模板题】
- JavaScript ECMAScript规范里对于分号semicolon用法最权威的定义
- asp.net core 3.0 gRPC框架小试
- P1092虫食算-深度优先搜索+玄学剪枝
- c语言按照姓名查询员工信息,输入10个职工信息,按号码大小排序,再使用查找函数找职工的姓…...
- 《刻意练习》到底讲了些什么???
- OPENWRT中SSH免密钥登陆(详细步骤)
- 4月18日云栖精选夜读 | 阿里靠什么支撑 EB 级计算力?
- SCWS中文分词,功能函数实例应用
- python系列九:python3迭代器和生成器
- mac上的微信小助手WeChatPlugin
- Spring Security OAuth2实现简单的密钥轮换及配置资源服务器JWK缓存
- srand c语言,C语言srand()rand()
- 如何利用 Github 搭建自己的免费图床?
- python第一行左对齐_python 左对齐,右对齐
热门文章
- Chrome 技术篇-json查看,json格式化,JSONView插件
- leetcode 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭
- SDUT_2121数据结构实验之链表六:有序链表的建立 (对建立的单项链表结构进行排序)
- Shi-Tomasi算子的运用 ,用于检测角点
- 聚类之isodata算法
- Python传输图片(同一局域网下版本)
- maven java 目录结构_java – 为maven目录结构生成的源文件的位置
- [转]TensorFlow如何进行时序预测
- 只读账号设置-db_datareader
- Ajax请求中的async:false/true的作用