解决react-native软键盘弹出挡住输入框的问题

写登录页面，整体界面居中之后就出现软键盘弹出挡住输入框，用户体验不好的情况。用了RN官方的KeyboardAvoidingView组件，会有多出来一块灰色区域的bug，于是我就找第三方来解决这个问题，最后用的是react-native-keyboard-aware-scroll-view

1. 安装react-native-keyboard-aware-scroll-view

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

yarn add react-native-keyboard-aware-scroll-view

2. 使用

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

<KeyboardAwareScrollView>

  <View>

    <TextInput />

  </View>

</KeyboardAwareScrollView>

3. 想要拓展功能的

前往https://github.com/APSL/react-native-keyboard-aware-scroll-view

解决react-native软键盘弹出挡住输入框的问题的更多相关文章

  1. html5 虚拟键盘弹出挡住底部的输入框解决方案

    问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...

  2. 小米note3，华为手机，软键盘弹出之后，页面上定位的元素布局会乱掉

    原因:可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').he ...

  3. Android软键盘弹出时布局问题

    最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...

  4. js防止安卓手机软键盘弹出挤压页面导致变形的方法

    5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...

  5. ionic项目中 软键盘弹出之后的问题：

    Android SDK目前提供的软键盘弹出模式接口只有两种: 一是弹出时自动回冲界面,将所有元素上顶: 一种则是不重绘界面,直接将控件元素遮住:     1. ionic 中弹出键盘遮挡住输入框(覆盖 ...

  6. android软键盘弹出引起的各种不适终极解决方案

    android软键盘弹出引起的各种不适终极解决方案 以下描述如何解决ListView高度小于0时出现的UI问题. 创建RelativeLayout的子类TxrjRelativeLayout publi ...

  7. android控制软键盘弹出方式

    android一把自带的软键盘弹出方式是会将布局顶上去,造成UI乱套的情况. 解决办法:方法一:在你的activity中的oncreate中setContentView之前写上这个代码getWindo ...

  8. input获取焦点软键盘弹出影响定位

    解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() {                                var ...

  9. H5页面 绝对定位元素被 软键盘弹出时顶起

    H5页面 绝对定位元素被 软键盘弹出时顶起 在h5页面开发的过程中,我们可能会遇到下面这个问题,当页面中有输入框的时候,系统自带的软盘会把按钮挤出原来的位置.那么我们该怎么解决呢?下面列出一下的方法: ...

随机推荐

  1. 牛客第二场A-run

    链接:https://www.nowcoder.com/acm/contest/140/A 来源:牛客网 White Cloud is exercising in the playground. Wh ...

  2. InnoDB存储引擎的 B+ 树索引

    B+ 树是为磁盘设计的 m 叉平衡查找树,在B+树中,所有的记录都是按照键值的大小,顺序存放在同一层的叶子节点上,各叶子节点组成双链表.叶节点是数据,非叶节点是索引. 首先,需要清楚:B+ 树索引并不 ...

  3. 这些你都了解么------程序员"跳槽"法则

    篇头语: “跳槽”这个词是从我报了"软件工程"这个专业后就已经开始听说的词了, 在大学中老师上课也会常说:“等你们参加工作以后,工资低不怕,没事就跳槽,之后工资就高了”: 我相信听 ...

  4. rsyslog的配置文件使用方法

    参考地址: http://www.rsyslog.com/doc/v8-stable/configuration/property_replacer.html rsyslog消息模板的定义规则 &qu ...

  5. js 时间戳转特定格式的日期

    var Tools = {}; Tools.formatDate = function (fmt,timestamp) { if(timestamp){ var date = new Date(par ...

  6. qt窗口最小化之后无法打开

    转自: https://blog.csdn.net/qiangzi4646/article/details/79743604 http://www.cnblogs.com/lingdhox/p/331 ...

  7. python（5）之集合

    集合是一个无序的,不重复的数据组合,它的主要作用如下: 1.去重,把一个列表变为集合就自动去重了 2.关系测试,测试两组数据之间的交集.并集.差集等 常用操作如下: #集合的操作 list_1={1, ...

  8. Win10系列：UWP界面布局进阶5

    提示框 在Windows应用商店应用程序中可以使用提示框来向用户显示提示信息,例如可以通过对话框来询问用户当前需要执行的操作,还可以通过弹出窗口来显示需要注意的信息.本节将向读者介绍如何在Window ...

  9. linux 定时任务 日志记录

    1  不记录日志 > /dev/null 2>&1 2 日志记录追加到指定文件 >> /path/mylog.log 2>&1

  10. python 学习 模块

    在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就越来越长,越来越不容易 维护, 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很 ...