[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版本: ...
随机推荐
- mysql局域网服务搭建
首先配置电脑Mysql环境变量 新建 Mysql服务配置 CMD >命令 : mysql -u root -p 4. 创建用户 Mysql 用户权限分配 5 重启服务 如果还不能访问就一定是你的 ...
- jvm 虚拟机参数_方法区内存分配
1.方法区( 永久区 ) 和堆一样,方法区是一块所有线程共享的区域,他用于保存系统类的信息.默认情况下 -XX:MaxPermSize 为 64m.如果系统运行时产生大量的类,就需要设置一个合适方法区 ...
- java源码之TreeSet
1,TreeSet介绍 1)TreeSet 是一个有序的集合,它的作用是提供有序的Set集合.2)TreeSet 继承于AbstractSet,所以它是一个Set集合,具有Set的属性和方法.3)Tr ...
- Sublime 插件Pylinter could not automatically determined the path to lint.py
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50618630 安装Sublime Te ...
- 洛谷 P2071 座位安排 seat.cpp/c/pas
P2071 座位安排 seat.cpp/c/pas 题目背景 公元二零一四年四月十七日,小明参加了省赛,在一路上,他遇到了许多问题,请你帮他解决. 题目描述 已知车上有N排座位,有N*2个人参加省赛, ...
- Ubuntu 16.04 安装 Open Jdk
sudo add-apt-repository ppa:openjdk-r/ppa sudo apt-get update sudo apt-get install openjdk-7-jdk
- Checkmarx VisualStudio plugin installation process.
1- Configuration of plugin VSTudio Prerequisite: -Your visual studio MUST be up to date with th ...
- 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 ...
- 开发者了解NET的15个特性
NET 开发者了解的15个特性 本文列举了 15 个值得了解的 C# 特性,旨在让 .NET 开发人员更好的使用 C# 语言进行开发工作. ObsoleteAttribute ObsoleteAttr ...
- BigDecimal相除异常
使用两个BigDecimal类型的数字做除法运算时,出现了一个如下的异常信息: 1 java.lang.ArithmeticException: Non-terminating decimal exp ...