[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 ...
随机推荐
- MySql数据查询中 left join 条件位置区别
/*A 和 B 两张表都只有一个 ID 字段 比如A表的数据为 ID 1,2,3,4,5,6 B表的数据为 ID 1,2,3 判断 JOIN 查询时候条件在 ON 和 WHERE 时的区别 ON 和 ...
- Winform学习知识汇总
引用博客 http://www.cnblogs.com/peterzb/archive/2009/06/14/1502918.html
- Java编程思想读书笔记_第三章
本章提到的关于==的部分,一个完整的实验如下: class Test { public static void main(String[] args) { Integer i = new Intege ...
- Git在工作中对项目的操作流程
Git 的准备工作 第一步:Git初始化 第一次在电脑上使用时,应该初始化操作,以后再使用Git操作,无需初始化,直接进行Git其他操作 git config --global user.name & ...
- python与arduino串口通讯对接opencv实现智能物品分拣
2018-05-0118:53:50 先上图: 再来视频: http://v.youku.com/v_show/id_XMzU3NzAwNzMyNA==.html?spm=a2hzp.8244740. ...
- Appium环境部署
Appium 是一个开源.跨平台的自动化测试工具,用于测试原生和轻量移动应用,支持 iOS, Android平台. 需要部署的软件:python环境.nodejs..net framework4.5. ...
- Object.assign() 对象的扩展
object.assign()方法用于对象的合并,将源对象的(source)的所有的可枚举属性,复制到目标对象(target) var target = {a:1}; var source1={b:2 ...
- HDU_1864_最大报销额_01背包
最大报销额 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status ...
- Linux文件排序和FASTA文件操作
文件排序 seq: 产生一系列的数字; man seq查看其具体使用.我们这使用seq产生下游分析所用到的输入文件. # 产生从1到10的数,步长为1 $ seq 1 10 1 2 3 4 5 6 7 ...
- maven引入的包无法使用 解决方法
如果正常引入后在依赖中能够找到包,但是打不开 1.有可能是包下载不完整 把maven下载源由国外转成阿里镜像源找到 maven 的配置文件: settings.xml 文件: <mirror&g ...