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:

  1. Keyboard.dismiss()

So build a High-Order-component, which wraps the actually inputs element, when click happens outside the inputs, close the keyboard.

  1. import React from 'react';
  2. import { View, TextInput, StyleSheet, Keyboard, TouchableWithoutFeedback } from 'react-native';
  3.  
  4. const DismissKeyboard = ({ children }) => (
  5. <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
  6. {children}
  7. </TouchableWithoutFeedback>
  8. );
  9.  
  10. const App = () => (
  11. <DismissKeyboard>
  12. <View style={styles.container}>
  13. <TextInput
  14. style={styles.input}
  15. placeholder="email"
  16. keyboardType="numeric"
  17. />
  18. <TextInput
  19. style={styles.input}
  20. placeholder="password"
  21. />
  22. </View>
  23. </DismissKeyboard>
  24. );
  25.  
  26. const styles = StyleSheet.create({
  27. container: {
  28. flex: 1,
  29. alignItems: 'center',
  30. justifyContent: 'center',
  31. backgroundColor: '#2374AB',
  32. },
  33. input: {
  34. width: '80%',
  35. paddingVertical: 10,
  36. paddingHorizontal: 5,
  37. borderRadius: 3,
  38. backgroundColor: '#ffffff70',
  39. marginVertical: 5,
  40. },
  41. });
  42.  
  43. 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. Layui表格编辑【不依赖Layui的动态table加载】

    依赖jquer,layui/css <td class="My_edit"></td> Jquery代码 //-----[Layui表格编辑(<td ...

  2. google浏览器安装接口测试工具postman方法

    Google安装postman: 未配好的文件下载(点击选择下面配好的直接用):下载 配置方法: 一:需要修改postman安装包中js/requester.js 和runner.js ,将其中的ai ...

  3. Git:Git的安装过程

    Git:Git的安装过程 路径不要存在空格 默认即可,第一项为是否在页面显示 文本编辑器,默认VIM即可 设置环境变量: 1)最安全的选择,path环境变量不会改变,你只能在git bash里使用命令 ...

  4. JAVA深克隆与浅克隆1

    复制就是得到一个副本 克隆就是复制一个对象的复本.但一个对象中可能有基本数据类型,如:int,long,float    等,也同时含有非基本数据类型如(数组,集合等)被克隆得到的对象基本类型的值修改 ...

  5. 分库代价高的情况下,如何优化ES解决亿级数据量检索

    数据平台已迭代三个版本,从一开始遇到很多常见的难题,到现在终于有片段时间整理一些已完善的文档,在此分享以供所需朋友的实现参考,但愿能帮助大家少走些弯路,在此篇幅中偏重于ElasticSearch的优化 ...

  6. oauth2.0里回调地址返回code中如何让code不显示在URL里?

    背景: 最近在调用对方提供的oauth2.0接口的时候,返回code在URL显示,但是会影响到本系统调用其他的菜单项的操作,所以想把返回的code值去掉. 解决办法:     想了各种解决办法,目前把 ...

  7. QT中|Qt::Tool类型窗口自动退出消息循环问题解决(setQuitOnLastWindowClosed必须设置为false,最后一个窗口不显示的时候,程序会退出消息循环)

    为application 设置setQuitOnLastWindowClosed属性,确实为true: 将其显示为false; 退出该应该程序不能调用QDialog的close消息槽,只能调用qApp ...

  8. NVMe到底是什么?

    转:http://www.expreview.com/42142.html 有关注SSD的朋友应该今年听到NVMe这个词的频率应该不低,随着高端SSD的战场已经抛弃SATA向PCI-E转移,老旧的AH ...

  9. JavaScript学习——完善注册页面表单校验

    1.之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果很差 我们希望做成把提示信息和校验结果放在输入栏的后面. 2.步骤分析 (此案例基于HTML&CSS——网站注册页 ...

  10. 查看锁表进程SQL语句

    查看锁表进程SQL语句   set pagesize 999 set line180 col ORACLE_USERNAME for a18 col OS_USER_NAME for a18 col ...