When you bring up the on screen keyboard in a mobile app, it will cover any text input or buttons on the bottom half of the screen, which can be frustrating for users. There are a few common ways to deal with this in React Native - and this video shows the following solutions:

First, you can use the built in KeyboardAvoidingView to move components around when the keyboard comes on screen. It has the advantage to being built in to React Native already - but it can be overly complicated to get this approach to work consistently across both iOS and Android.

There is also a third party library called KeyboardAwareScrollView, which will allow your entire view to scroll, and will keep the currently selected text inputs up and out of the way of the keyboard.

Install:

npm i -D react-native-keyboard-aware-scroll-view

Use:

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

export default class App extends Component {
render() {
return (
<KeyboardAwareScrollView
style={{ flex: 1 }}
> <View style={styles.loginHeader}>
<Text style={styles.headerText}>App Name</Text>
</View> <View style={styles.loginInputs}>
<Text style={styles.label}>Username</Text>
<TextInput
placeholder="Username"
style={styles.input}
/>
<Text style={styles.label}>Password</Text>
<TextInput
placeholder="Password"
style={styles.input}
secureTextEntry={true}
/>
<TouchableOpacity style={styles.loginButton}>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
</View> </KeyboardAwareScrollView>
);
}
}

[React Native] Prevent the On-screen Keyboard from Covering up Text Inputs的更多相关文章

  1. Apple & iOS & Device Screen Sizes and Orientations & React Native

    Apple & iOS & Device Screen Sizes and Orientations & React Native iOS devices https://de ...

  2. React Native(ios)项目中logo,启动屏设置

    由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到re ...

  3. React Native视频播放(iOS)

    网站链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/learn-react-native-video/ React Nativ ...

  4. 如何用 React Native 创建一个iOS APP?

    诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...

  5. React Native 之 项目实战(一)

    前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...

  6. React Native 系列(八) -- 导航

    前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...

  7. React Native 系列(九) -- Tab标签组件

    前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...

  8. React Native填坑之旅 -- 使用react-navigation代替Navigator

    Navigator已经被React Native废弃了.也许你可以在另外的一个依赖库里react-native-deprecated-custom-components里找到.不过既然官方推荐的是re ...

  9. React Native学习(三)—— 使用导航器Navigation跳转页面

    本文基于React Native 0.52 参考文档https://reactnavigation.org/docs/navigators/navigation-prop 一.基础 1.三种类型 Ta ...

随机推荐

  1. Java 8 (1) 行为参数化

    行为参数化就是可以帮助你处理频繁变更需求的一种软件开发模式.它意味着拿出一个代码块,把它准备好却不去执行它.这个代码块以后可以被你程序的其他部分调用,这意味着你可以推迟这块代码的执行.例如:你可以将代 ...

  2. Log4Net学习笔记(1)-完整的例子

    一.开发环境 编译器:VS2013 .Net版本:4.5 二.开发流程 1.从nuget上获取log4net 2.配置log4net的配置文件 <?xml version="1.0&q ...

  3. Ubuntu 16.04安装Kate文本编辑工具

    Kate支持很多语言,比如NASM,比SBL3低那么一点,但是比Gedit好. 安装: sudo apt-get install kate 启动: 额外配置: 1.安装Kwrite sudo apt- ...

  4. 安卓TV盒子常见问题以及解决方法

    1.为什么requestfocus无效 原因:requestfocus不支持在Touch模式下的Focus; 解法方案:再加一个requestFocusFromTouch函数. 2.摄像头打开问题,调 ...

  5. 左耳听风 ARTS Week 001

    要求:1.每周至少做一个 leetcode 的算法题 2.阅读并点评至少一篇英文技术文章 3.学习至少一个技术技巧 4.分享一篇有观点和思考的技术文章 1.每周至少做一个 leetcode 的算法题 ...

  6. 详谈Struts+Hibernate+Spring三大框架

    前言:对于JAVA WEB端的程序员来说,对JAVA三大框架:Struts+Hibernate+Spring的了解必不可缺,下面详细谈谈 Java三大框架主要用来做WEN应用. 三大框架:Struts ...

  7. Ngnix SSL配置(HTTP、HTTPS兼容)

    一.使用阿里云提供证书 下载aliyun证书for Nginx,解压出两个文件,.pem和.key文件 在nginx安装目录Conf文件夹下新建cert文件夹,拷贝两个密钥文件 二.配置nginx 打 ...

  8. sharepoint services

    I have got solution for authentication to share point web service I have use fedAuth Cookie and rtfa ...

  9. Compute和Linq的Field使用

    目录: Compute的使用 Field的使用 1.Compute 案例: private void ComputeBySalesSalesID(DataSet dataSet) { // Presu ...

  10. 了解固态硬盘SSD,竟然如此简单!小白也能懂!

    https://www.youtube.com/watch?v=alb6-zp52mA