解决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. InnoDB存储引擎介绍-(3)InnoDB缓冲池配置详解

    原文链接  http://www.ywnds.com/?p=9886 一.InnoDB缓冲池 InnoDB维护一个称为缓冲池的内存存储区域 ,用于缓存内存中的数据和索引.了解InnoDB缓冲池的工作原 ...

  2. div中文字上下居中

    <div class="title">Title</div> 1. 将div高度设成定值 2. 将line-height设成定值 3. 将text-alig ...

  3. Jsop的原理

    Jsop的原理:利用script不存在跨域的问题,动态创建script标签,把需要请求的数据源地址赋值给其src属性,并且指定一个回调函数,从而接受到我们想要的数据

  4. InnoDB表空间、段、区

    1. 表空间是InnoDB存储引擎逻辑结构的最高层,所有的数据都存放在表空间中.默认,InnoDB存储引擎只有一个表空间ibdata1,即所有数据都存放在这个表空间内.如果用户启用了参数innodb_ ...

  5. view的focusable属性改变设置是否可获取光标

    注意图中我画的箭头,当时鼠标点击的黑色圈圈的位置,然后按钮出现了按下的效果(黄色的描边) 刚开始看到这种效果很是好奇,不知道是怎么实现的,后来仔细一想,应该是整个啤酒罐是一张图片(ImageView) ...

  6. linux 程序实现后台运行

    先上代码: getopt函数获取参数  -d 控制台控制运行  -D 后天运行  -h 调用show_help函数. 编译命令 gcc -g -W test.c -o test 注意后台运行 ./te ...

  7. China’s movie heroes 《红海行动》展现中国英雄本色

    Recent years have seen a trend for big military movies. Whether it was last year’s British hit Dunki ...

  8. php微信公众号开发

    简单的事例总结: wamp下载安装:https://sourceforge.net/projects/wampserver/ www目录里创建php文件weixin.php <?php head ...

  9. 学习笔记-AngularJs(五)

    之前的页面太丑了,后来我引入了bootstrap.css,把样式进行修了一番,如下图(一不小心,插入个链接,忽略,http://t.cn/RUbL4rP): (链接:http://www.live08 ...

  10. hash与平衡二叉树的区别

    哈希表的定义:哈希表是一种根据关键码去寻找值的数据映射结构,该结构通过把关键码映射的位置去寻找存放值的地方 https://blog.csdn.net/duan19920101/article/det ...