[React Native] Prevent the On-screen Keyboard from Covering up Text Inputs
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的更多相关文章
- Apple & iOS & Device Screen Sizes and Orientations & React Native
Apple & iOS & Device Screen Sizes and Orientations & React Native iOS devices https://de ...
- React Native(ios)项目中logo,启动屏设置
由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到re ...
- 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 ...
- 如何用 React Native 创建一个iOS APP?
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...
- React Native 之 项目实战(一)
前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...
- React Native 系列(八) -- 导航
前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...
- React Native 系列(九) -- Tab标签组件
前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...
- React Native填坑之旅 -- 使用react-navigation代替Navigator
Navigator已经被React Native废弃了.也许你可以在另外的一个依赖库里react-native-deprecated-custom-components里找到.不过既然官方推荐的是re ...
- React Native学习(三)—— 使用导航器Navigation跳转页面
本文基于React Native 0.52 参考文档https://reactnavigation.org/docs/navigators/navigation-prop 一.基础 1.三种类型 Ta ...
随机推荐
- Java 8 (1) 行为参数化
行为参数化就是可以帮助你处理频繁变更需求的一种软件开发模式.它意味着拿出一个代码块,把它准备好却不去执行它.这个代码块以后可以被你程序的其他部分调用,这意味着你可以推迟这块代码的执行.例如:你可以将代 ...
- Log4Net学习笔记(1)-完整的例子
一.开发环境 编译器:VS2013 .Net版本:4.5 二.开发流程 1.从nuget上获取log4net 2.配置log4net的配置文件 <?xml version="1.0&q ...
- Ubuntu 16.04安装Kate文本编辑工具
Kate支持很多语言,比如NASM,比SBL3低那么一点,但是比Gedit好. 安装: sudo apt-get install kate 启动: 额外配置: 1.安装Kwrite sudo apt- ...
- 安卓TV盒子常见问题以及解决方法
1.为什么requestfocus无效 原因:requestfocus不支持在Touch模式下的Focus; 解法方案:再加一个requestFocusFromTouch函数. 2.摄像头打开问题,调 ...
- 左耳听风 ARTS Week 001
要求:1.每周至少做一个 leetcode 的算法题 2.阅读并点评至少一篇英文技术文章 3.学习至少一个技术技巧 4.分享一篇有观点和思考的技术文章 1.每周至少做一个 leetcode 的算法题 ...
- 详谈Struts+Hibernate+Spring三大框架
前言:对于JAVA WEB端的程序员来说,对JAVA三大框架:Struts+Hibernate+Spring的了解必不可缺,下面详细谈谈 Java三大框架主要用来做WEN应用. 三大框架:Struts ...
- Ngnix SSL配置(HTTP、HTTPS兼容)
一.使用阿里云提供证书 下载aliyun证书for Nginx,解压出两个文件,.pem和.key文件 在nginx安装目录Conf文件夹下新建cert文件夹,拷贝两个密钥文件 二.配置nginx 打 ...
- sharepoint services
I have got solution for authentication to share point web service I have use fedAuth Cookie and rtfa ...
- Compute和Linq的Field使用
目录: Compute的使用 Field的使用 1.Compute 案例: private void ComputeBySalesSalesID(DataSet dataSet) { // Presu ...
- 了解固态硬盘SSD,竟然如此简单!小白也能懂!
https://www.youtube.com/watch?v=alb6-zp52mA