解决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. mybatis调用存储过程的两种方式

    先总结和说明一下注意点: 1.如果传入的某个参数可能为空,必须指定jdbcType 2.当传入map作为参数时,必须指定JavaType 3.如果做动态查询(参数为表名,sql关键词),可以使用${} ...

  2. Lucene.Net 学习(搜索部分)(低要求,写给自己看)

    1. 搜索 排序:lucene 提供了Sort类对结果进行排序 提供了Filter类对查询条件进行限制 你或许会不自觉地拿它跟SQL语句进行比较:“lucene能执行and.or.order by.w ...

  3. 【转】Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 V ...

  4. Unity运行错误代码处理

    1.Unity在运行时出现如图错误,但不影响运行效果展示. 2.错误原因:代码不规范. 3.检查代码,查看变量是否定义正确.

  5. zookeeper集群环境搭建(使用kafka的zookeeper搭建zk集群)

    ---恢复内容开始--- 使用kafka的zookeeper来搞集群的话和单纯用zk的其实差不了多少. 0.说在前头,搭建kafka集群之前请把每个服务器的jdk搞起来. 1.安装kafka wget ...

  6. python ----字符串基础练习题30道

    1.执行python脚本的两种方式 一种是点开始--运行--cmd 方式(这个操作需要先配置好环境变量path路径)之后运行python 二是直接进安装目录 运行tython软件运行.pycharm ...

  7. Centos防火墙设置与端口开放的方法

    Centos升级到7之后,内置的防火墙已经从iptables变成了firewalld.所以,端口的开启还是要从两种情况来说明的,即iptables和firewalld.更多关于CentOs防火墙的最新 ...

  8. [Linux]Linux下修改snmp协议的默认161端口

    一.Linux SNMP的配置 SNMP的简介和Linux下IPV4,IPV6地址的snmp协议开启可以参考上一个随笔:[Linux]CentOS6.9开启snmp支持IPV4和IPV6 二.修改默认 ...

  9. (C/C++学习笔记) 一. 基础知识

    一. 基础知识 ● 程序和C/C++ 程序: 根据Wirth (1976), Algorithms + Data Structures = Programs. Whence C: 1972, Denn ...

  10. Cracking The Coding Interview 9.0

    #include <iostream> #include <vector> using namespace std; void mswap(int &a, int &a ...