[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版本: ...
随机推荐
- linux--rbtree 解惑 insert
rbtree.txt 中insert 操作,为何用2级指针?? 2级指针用的还是不熟.心虚. Inserting data in the tree involves first searching f ...
- 如何成为资深的python专家
相信很多人有这种感受,python很简单,几天就学会了:做了一段时间就觉得python没什么好玩的,就这样. 一种语言有火这么久,必有它存在的道理. 第一.我们要相信她,她就像你的新女朋友一样,她会给 ...
- 基于Quick_Thought Vectors的Sentence2Vec神经网络实现
一.前言 1.Skip-Thought-Vector论文 https://github.com/ryankiros/skip-thoughts 2.本文假设读者已了解Skip-Gram-Vector和 ...
- struts2解决动态多文件上传的问题(上传文件与数据库字段一一对应)(转)
struts2多文件上传我想只要会用struts2的朋友都不会陌生,但是怎么在action中根据用户上传的文 件把文件路径写到数据库中对应的字段上呢?ps:我的意思是这样,页面上有固定的5个上传文件的 ...
- SpringMVC上传文件(图片)并保存到本地
SpringMVC上传文件(图片)并保存到本地 小记一波~ 基本的MVC配置就不展示了,这里给出核心代码 在spring-mvc的配置文件中写入如下配置 <bean id="multi ...
- java源码之Comparable和Comparator
1,Comparable 简介 Comparable 是排序接口. 若一个类实现了Comparable接口,就意味着“该类支持排序”. 即然实现Comparable接口的类支持排序,假设现在存在“实 ...
- Android native CursorWindow数据保存原理
我们通过Uri查询数据库所得到的数据集,保存在native层的CursorWindow中.CursorWindow的实质是共享内存的抽象,以实现跨进程数据共享.共享内存所採用的实现方式是文件映射. 在 ...
- DataTables warning: table id=dataTable - Requested unknown parameter 'acceptId' for row 0. For more
重点内容 DataTables warning: table id=dataTable - Requested unknown parameter 'acceptId' for row 0. For ...
- OpenMp之reduction求和
// OpenMP1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include"omp.h" #include& ...
- 基于Dragon Board410c 的智能机器人预研-语音识别及定位
转自:http://www.csdn.net/article/a/2016-01-06/15833642 一.前言 机器人是一种可编程和多功能的.用来搬运材料.零件.工具的操作机,智能机器人则是一个在 ...