[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 ...
随机推荐
- 致创业者:APP已死 服务永生
前几日,有位创业者和我讲他在带领团队做一个将爱踢球的人集中在一起的App,我告诉他你的创业方向错了.原因在于你的目的是要为爱踢球的人提供服务,而你现在却在竭尽全力的做App,你应该做的是设计你为爱踢球 ...
- VS2013使用单元测试
一.开发环境 开发工具:VS2013 二.开发流程 1.添加一个控制台项目UnitDemo namespace UnitDemo { public class Program { static voi ...
- Modbus通讯协议简介
Modbus协议简介 Modbus协议最初由Modicon公司开发出来,此协议支持传统的RS-232.RS-422.RS-485和以太网设备,许多工业设备,包括PLC,DCS,智能仪表等都在使用Mod ...
- Extensions can add new functionality to a type, but they cannot override existing functionality.
Extensions can add new functionality to a type, but they cannot override existing functionality.
- mfc按钮悬停显示文字
.h CToolTipCtrl m_toopTip; .cpp oninitdialog void CDlgDwgLibMan::InitTooltips(){ EnableToolTips(); m ...
- 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...
- Oracle 11g 字符集修改
服务端字符集修改 1.确认服务端字符集 select userenv('language') from dual; 2.修改服务端字符集 首先以 DBA 身份登录 Oracle.Windows 系统下 ...
- Appium 的xpath定位
Appium 的xpath定位 1.如果元素text是唯一的,可以通过text文本定位 //*[@text=’text文本属性’] # 定位text driver.find_element_by_xp ...
- Django - 自定义simple_tag
使用现有函数: 通过对传入的参数,后面跟一个管道符号+python函数,来完成对传入参数的修改. 返回值 自定义simple_tag: 具体操作步骤如下: 1.在某个app下,创建目录template ...
- Linux之awk用法
简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...