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的更多相关文章

  1. React Native是一套使用 React 构建 Native app 的编程框架

    React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...

  2. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  3. 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 ...

  4. React系列(一):React入门

    React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...

  5. react.js 从零开始(七)React (虚拟)DOM

    React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...

  6. 如何使用TDD和React Testing Library构建健壮的React应用程序

    如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...

  7. React环境配置(第一个React项目)

    使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...

  8. React入门介绍(2)- React Component-React组件

    React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...

  9. react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types

    最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本:    ...

随机推荐

  1. linux--rbtree 解惑 insert

    rbtree.txt 中insert 操作,为何用2级指针?? 2级指针用的还是不熟.心虚. Inserting data in the tree involves first searching f ...

  2. 如何成为资深的python专家

    相信很多人有这种感受,python很简单,几天就学会了:做了一段时间就觉得python没什么好玩的,就这样. 一种语言有火这么久,必有它存在的道理. 第一.我们要相信她,她就像你的新女朋友一样,她会给 ...

  3. 基于Quick_Thought Vectors的Sentence2Vec神经网络实现

    一.前言 1.Skip-Thought-Vector论文 https://github.com/ryankiros/skip-thoughts 2.本文假设读者已了解Skip-Gram-Vector和 ...

  4. struts2解决动态多文件上传的问题(上传文件与数据库字段一一对应)(转)

    struts2多文件上传我想只要会用struts2的朋友都不会陌生,但是怎么在action中根据用户上传的文 件把文件路径写到数据库中对应的字段上呢?ps:我的意思是这样,页面上有固定的5个上传文件的 ...

  5. SpringMVC上传文件(图片)并保存到本地

    SpringMVC上传文件(图片)并保存到本地 小记一波~ 基本的MVC配置就不展示了,这里给出核心代码 在spring-mvc的配置文件中写入如下配置 <bean id="multi ...

  6. java源码之Comparable和Comparator

    1,Comparable 简介 Comparable 是排序接口. 若一个类实现了Comparable接口,就意味着“该类支持排序”.  即然实现Comparable接口的类支持排序,假设现在存在“实 ...

  7. Android native CursorWindow数据保存原理

    我们通过Uri查询数据库所得到的数据集,保存在native层的CursorWindow中.CursorWindow的实质是共享内存的抽象,以实现跨进程数据共享.共享内存所採用的实现方式是文件映射. 在 ...

  8. DataTables warning: table id=dataTable - Requested unknown parameter &#39;acceptId&#39; for row 0. For more

    重点内容 DataTables warning: table id=dataTable - Requested unknown parameter 'acceptId' for row 0. For ...

  9. OpenMp之reduction求和

    // OpenMP1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include"omp.h" #include& ...

  10. 基于Dragon Board410c 的智能机器人预研-语音识别及定位

    转自:http://www.csdn.net/article/a/2016-01-06/15833642 一.前言 机器人是一种可编程和多功能的.用来搬运材料.零件.工具的操作机,智能机器人则是一个在 ...