解决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. oracle数据库备份任务

    备份脚本如下: 1.0 expdp1.1导出某些schema #!/bin/bash ORACLE_BASE=/oracle/productexport ORACLE_BASEORACLE_HOME= ...

  2. 第 4 章 用 HTML5 建立超链接

    HTML 文件中最重要的应用之一就是超链接.—— 当鼠标单击一些文字.图片或其他网页元素时,浏览器会根据其指示载入一个新的页面或跳转到页面的其他位置. 超链接除了可链接文本外,也可链接各种媒体,如声音 ...

  3. Spring注解之@validated的使用

    spring-boot中可以用@validated来校验数据,如果数据异常则会统一抛出异常,方便异常中心统一处理.比如,我们判断一个输入参数是否合法,可以用如下方式 一 基础使用 因为spring-b ...

  4. python中eval()和json.dumps的使用

    在python中通过requests.get(url)获取json数据,此时可能需要eval进行解析. # -*- coding: utf-8 -*- import requests r = requ ...

  5. Wireshark:No interfaces found解决方法(Windows 10)

    启动Wireshark时有时会报“No interfaces found”,找不到网卡进行截包.造成这种情况的原因可能有两个,一是npf服务没启动,二是当前用启对网卡没有拦截权限. 一.npf服务未启 ...

  6. mac crontab时间断内随机时间执行定时任务

    首先需要了解crontab使用,这里不多,主要是时间断内随机时间: 然而crontab 并没有具体方法实现时间段内随机时间执行,我的办法如下: 这里测试一个例子: 执行一个数据存文件python脚本, ...

  7. am335x system upgrade uboot ethernet(二)

    系统可以通过SD卡引道之后,为了之后了调试方便 通过查看网卡的硬件设计 正常来说需要注意的有如下几点: 1) 网口 的接线方式: RMII 2) 网口的PHY地址两张网口,这里我们只需先初始化一张网卡 ...

  8. SignalR 前期简单配置

    一.随便你在哪个命名空间下新建一个Startup类,并在在该类中注册SignalR. using Owin; using System; using System.Collections.Generi ...

  9. PE文件 02 导出表

    0x01  导出表结构  导出表是由数据目录表中的第一个成员DataDirectory[0]指出的: typedef struct _IMAGE_DATA_DIRECTORY { DWORD Virt ...

  10. table添加行

    需求是要实现表格的动态增加与删除,并且保留标题行和首行,找了半天jq插件,没找到合适的,所以自己写了个demo <!DOCTYPE html> <html> <head& ...