[React Native] Dismiss the Keyboard in React Native
In this lesson you will learn how create a re-usable component that gives the user the ability to dismiss the keyboard whenever they tap outside of a TextInput. To accomplish this we'll take a look at the TouchableWithoutFeedback
component and the Keyboard
API.
The whole idea for dismiss keyboard is calling:
- Keyboard.dismiss()
So build a High-Order-component, which wraps the actually inputs element, when click happens outside the inputs, close the keyboard.
- import React from 'react';
- import { View, TextInput, StyleSheet, Keyboard, TouchableWithoutFeedback } from 'react-native';
- const DismissKeyboard = ({ children }) => (
- <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
- {children}
- </TouchableWithoutFeedback>
- );
- const App = () => (
- <DismissKeyboard>
- <View style={styles.container}>
- <TextInput
- style={styles.input}
- placeholder="email"
- keyboardType="numeric"
- />
- <TextInput
- style={styles.input}
- placeholder="password"
- />
- </View>
- </DismissKeyboard>
- );
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- backgroundColor: '#2374AB',
- },
- input: {
- width: '80%',
- paddingVertical: 10,
- paddingHorizontal: 5,
- borderRadius: 3,
- backgroundColor: '#ffffff70',
- marginVertical: 5,
- },
- });
- export default App;
[React Native] Dismiss the Keyboard in React Native的更多相关文章
- React Native是一套使用 React 构建 Native app 的编程框架
React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- weblogic.nodemanager.common.ConfigException: Native version is enabled but nodemanager native library could not be loaded 解决办法
近日在一个原本工作正常的weblogic web server(操作系统为redhat 64位系统)上折腾安装redis/hadoop等东东,yum install了一堆第3方类库后,重启weblog ...
- React系列(一):React入门
React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...
- react.js 从零开始(七)React (虚拟)DOM
React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...
- 如何使用TDD和React Testing Library构建健壮的React应用程序
如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...
- React环境配置(第一个React项目)
使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...
- React入门介绍(2)- React Component-React组件
React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...
- react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types
最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本: ...
随机推荐
- Layui表格编辑【不依赖Layui的动态table加载】
依赖jquer,layui/css <td class="My_edit"></td> Jquery代码 //-----[Layui表格编辑(<td ...
- google浏览器安装接口测试工具postman方法
Google安装postman: 未配好的文件下载(点击选择下面配好的直接用):下载 配置方法: 一:需要修改postman安装包中js/requester.js 和runner.js ,将其中的ai ...
- Git:Git的安装过程
Git:Git的安装过程 路径不要存在空格 默认即可,第一项为是否在页面显示 文本编辑器,默认VIM即可 设置环境变量: 1)最安全的选择,path环境变量不会改变,你只能在git bash里使用命令 ...
- JAVA深克隆与浅克隆1
复制就是得到一个副本 克隆就是复制一个对象的复本.但一个对象中可能有基本数据类型,如:int,long,float 等,也同时含有非基本数据类型如(数组,集合等)被克隆得到的对象基本类型的值修改 ...
- 分库代价高的情况下,如何优化ES解决亿级数据量检索
数据平台已迭代三个版本,从一开始遇到很多常见的难题,到现在终于有片段时间整理一些已完善的文档,在此分享以供所需朋友的实现参考,但愿能帮助大家少走些弯路,在此篇幅中偏重于ElasticSearch的优化 ...
- oauth2.0里回调地址返回code中如何让code不显示在URL里?
背景: 最近在调用对方提供的oauth2.0接口的时候,返回code在URL显示,但是会影响到本系统调用其他的菜单项的操作,所以想把返回的code值去掉. 解决办法: 想了各种解决办法,目前把 ...
- QT中|Qt::Tool类型窗口自动退出消息循环问题解决(setQuitOnLastWindowClosed必须设置为false,最后一个窗口不显示的时候,程序会退出消息循环)
为application 设置setQuitOnLastWindowClosed属性,确实为true: 将其显示为false; 退出该应该程序不能调用QDialog的close消息槽,只能调用qApp ...
- NVMe到底是什么?
转:http://www.expreview.com/42142.html 有关注SSD的朋友应该今年听到NVMe这个词的频率应该不低,随着高端SSD的战场已经抛弃SATA向PCI-E转移,老旧的AH ...
- JavaScript学习——完善注册页面表单校验
1.之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果很差 我们希望做成把提示信息和校验结果放在输入栏的后面. 2.步骤分析 (此案例基于HTML&CSS——网站注册页 ...
- 查看锁表进程SQL语句
查看锁表进程SQL语句 set pagesize 999 set line180 col ORACLE_USERNAME for a18 col OS_USER_NAME for a18 col ...