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. MySql数据查询中 left join 条件位置区别

    /*A 和 B 两张表都只有一个 ID 字段 比如A表的数据为 ID 1,2,3,4,5,6 B表的数据为 ID 1,2,3 判断 JOIN 查询时候条件在 ON 和 WHERE 时的区别 ON 和 ...

  2. Winform学习知识汇总

    引用博客 http://www.cnblogs.com/peterzb/archive/2009/06/14/1502918.html

  3. Java编程思想读书笔记_第三章

    本章提到的关于==的部分,一个完整的实验如下: class Test { public static void main(String[] args) { Integer i = new Intege ...

  4. Git在工作中对项目的操作流程

    Git 的准备工作 第一步:Git初始化 第一次在电脑上使用时,应该初始化操作,以后再使用Git操作,无需初始化,直接进行Git其他操作 git config --global user.name & ...

  5. python与arduino串口通讯对接opencv实现智能物品分拣

    2018-05-0118:53:50 先上图: 再来视频: http://v.youku.com/v_show/id_XMzU3NzAwNzMyNA==.html?spm=a2hzp.8244740. ...

  6. Appium环境部署

    Appium 是一个开源.跨平台的自动化测试工具,用于测试原生和轻量移动应用,支持 iOS, Android平台. 需要部署的软件:python环境.nodejs..net framework4.5. ...

  7. Object.assign() 对象的扩展

    object.assign()方法用于对象的合并,将源对象的(source)的所有的可枚举属性,复制到目标对象(target) var target = {a:1}; var source1={b:2 ...

  8. HDU_1864_最大报销额_01背包

    最大报销额 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  9. Linux文件排序和FASTA文件操作

    文件排序 seq: 产生一系列的数字; man seq查看其具体使用.我们这使用seq产生下游分析所用到的输入文件. # 产生从1到10的数,步长为1 $ seq 1 10 1 2 3 4 5 6 7 ...

  10. maven引入的包无法使用 解决方法

    如果正常引入后在依赖中能够找到包,但是打不开 1.有可能是包下载不完整 把maven下载源由国外转成阿里镜像源找到 maven 的配置文件: settings.xml 文件: <mirror&g ...