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. mysql局域网服务搭建

    首先配置电脑Mysql环境变量 新建 Mysql服务配置 CMD >命令 : mysql -u root -p 4. 创建用户 Mysql 用户权限分配 5 重启服务 如果还不能访问就一定是你的 ...

  2. jvm 虚拟机参数_方法区内存分配

    1.方法区( 永久区 ) 和堆一样,方法区是一块所有线程共享的区域,他用于保存系统类的信息.默认情况下 -XX:MaxPermSize 为 64m.如果系统运行时产生大量的类,就需要设置一个合适方法区 ...

  3. java源码之TreeSet

    1,TreeSet介绍 1)TreeSet 是一个有序的集合,它的作用是提供有序的Set集合.2)TreeSet 继承于AbstractSet,所以它是一个Set集合,具有Set的属性和方法.3)Tr ...

  4. Sublime 插件Pylinter could not automatically determined the path to lint.py

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50618630 安装Sublime Te ...

  5. 洛谷 P2071 座位安排 seat.cpp/c/pas

    P2071 座位安排 seat.cpp/c/pas 题目背景 公元二零一四年四月十七日,小明参加了省赛,在一路上,他遇到了许多问题,请你帮他解决. 题目描述 已知车上有N排座位,有N*2个人参加省赛, ...

  6. Ubuntu 16.04 安装 Open Jdk

    sudo add-apt-repository ppa:openjdk-r/ppa sudo apt-get update sudo apt-get install openjdk-7-jdk

  7. Checkmarx VisualStudio plugin installation process.

    1-      Configuration of plugin VSTudio Prerequisite: -Your visual studio MUST be up to date with th ...

  8. netty底层是事件驱动的异步库 但是可以await或者sync(本质是future超时机制)同步返回 但是官方 Prefer addListener(GenericFutureListener) to await()

    io.netty.channel 摘自:https://netty.io/4.0/api/io/netty/channel/ChannelFuture.html Interface ChannelFu ...

  9. 开发者了解NET的15个特性

    NET 开发者了解的15个特性 本文列举了 15 个值得了解的 C# 特性,旨在让 .NET 开发人员更好的使用 C# 语言进行开发工作. ObsoleteAttribute ObsoleteAttr ...

  10. BigDecimal相除异常

    使用两个BigDecimal类型的数字做除法运算时,出现了一个如下的异常信息: 1 java.lang.ArithmeticException: Non-terminating decimal exp ...