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

最新推荐文章于 2024-05-19 09:40:23 发布
最新推荐文章于 2024-05-19 09:40:23 发布
阅读量5.8k 收藏 1
点赞数
分类专栏： react-native 界面 文章标签： react-native 解决方案 用户体验 界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huhao0829/article/details/78502806
版权
本文介绍了如何在react-native应用中解决软键盘弹出时遮挡输入框的问题，通过使用react-native-keyboard-aware-scroll-view组件，避免了KeyboardAvoidingView带来的灰色区域bug，提升了用户体验。
摘要由CSDN通过智能技术生成

解决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
最低0.47元/天 解锁文章
zust_hh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-native键盘弹起遮挡输入框
shizhihua11的博客
04-03 772
import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, Image, FlatList, Dimensions, WebView, TouchableOpacity, TextInput, Na...
React-native键盘遮挡输入框问题的解决
weixin_30270561的博客
01-07 265
　　2016年10月25日更新： 　　现在有一个更准确一点的做法是用一个View包裹住TextInput，然后通过该View的onLayout方法获取该输入框的y轴位置，再减去一个适当的高度去处理scrollview的滚动，如下所示： <View onLayout={this._downloadLayout.bind(this)} style={{marginLeft:15,f...
react native 键盘遮挡输入框的问题
Elaine20132014的博客
10-09 1206
1.在写react native时会碰到弹起的键盘遮挡住输入框的问题 官网给出了解决方案：https://reactnative.cn/docs/keyboardavoidingview#docsNav keyboardavoidingview可以解决这个问题 需要给参数behavior={"position/height/padding"} keyboardVerticalOffset给值一般是给键盘的高度 2.rn获取键盘高度方法 import { Keyboard } from 'rea
react-Reactnative仿支付宝密码输入框
08-15
React Native提供了一系列的调试工具，如`React Native Debugger`和`Chrome DevTools`，帮助开发者定位和解决问题。 以上就是基于React Native仿支付宝密码输入框的主要技术点。在`react-native-password-pay-...
react native 解决键盘弹起遮挡输入框问题
三七二十一的博客
07-13 4662
问题:使用Textinput组件时,ios模拟器软键盘弹出会遮挡住输入框. 如何调出软键盘: 解决思路:(其他情况类似) 1、Textinput在ScrollView中 当弹出软键盘时,计算软键盘的高度,state设置ScrollView的paddingBottom值加上软键盘的高度 2、Textinput固定在屏幕底部 当弹出软键盘时,计算软键盘的高度,state设置Textin...
react在安卓中输入框被手机键盘遮挡问题的解决方法
12-09
前言 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 本文主要介绍了关于react在安卓输入框被键盘遮挡的相关内容，分享出来动大家参考学习，下面话不多说了，来一起看看详细的介绍吧 问题概述 今天遇到了一个问题，在安卓手机上，当我要点击输入“店铺名称”时，手机软键盘弹出来刚好把输入框挡住了；挡住就算了，关键是页面还不能向上滑动，整个手机窗口被压为原来的二分之一左右； 然后 然后找了一些方案，不过不大适用
React Native 键盘挡住输入框解决方法
koufulong的博客
02-20 851
一、使用ref 选中外层的ScrollView标签 二、在componentDidMount方法中对键盘进行监听 // 监听键盘 this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardDidShow); this.keyboardWillHide...
React Native笔记(三)：解决在RN中使用Android原生WebView时输入框被遮挡问题
ZBM来了
04-27 959
如题，在解决该问题前，上网搜了一下资料，找到了下面这个方案： Android webView输入框软键盘遮挡问题-终极解决方案(不好使你打我) 但是，这在纯原生上可行，在rn上却没有效果。主要原因是rn有自己的一套布局测量绘制机制，导致在原生调用requestLayout()没有响应，经过几次实践，得出下面针对rn的解决办法。 重写WebView的requestLayout方法，rn绘制时主动通知原生重新布局WebView public class CusWebView extends WebView{
rn android软键盘遮挡布局处理,React-native 关于键盘遮挡界面问题
weixin_36399446的博客
05-26 249
salt yum安装lamp在批量安装软件前,先找台测试机yum装一遍,看是否报错等,是否依赖包全等 . 本次我们在dev环境下搞. 先看一下已搞成功的目录结构 定义dev环境的第二个好处 ...C&num;操作Word的辅助类(word2003) 修改完善版转自:http://blog.csdn.net/jiutao_tang/article/de...
推荐使用：react-native-avoid-softinput - 解决React Native应用键盘遮挡问题的专业方案
最新发布
gitblog_00008的博客
05-19 395
推荐使用：react-native-avoid-softinput - 解决React Native应用键盘遮挡问题的专业方案 项目地址:https://gitcode.com/mateusz1913/react-native-avoid-softinput 在开发React Native应用程序时，一个常见的痛点就是当输入框获得焦点时，软键盘弹出可能会覆盖页面上的部分内容。为了解决这个问题，我们...
React Native 应用在键盘弹出时优雅地响应
热门推荐
大灰狼的小绵羊哥哥的博客
06-09 1万+
在使用 React Native 应用时，一个常见的问题是当你点击文本输入框时，键盘会弹出并且遮盖住输入框。就像这样： 有几种方式可以避免这种情况发生。一些方法比较简单，另一些稍微复杂。一些是可以自定义的，一些是不能自定义的。今天，我将向你展示 3 种不同的方式来避免 React Native 应用中的键盘遮挡问题。 文章中所有的代码都托管在 GitHub 上 Key
RN键盘弹起解决方案
我脾气呢的博客
06-01 1645
1.设置输入框 点击弹起 ios没有问题 但是在安卓上面有问题 找到AndroidManifest.xml文件并且修改android:windowSoftInputMode的值
React-native 键盘弹出绝对定位上浮
互联网思维
09-17 3757
RN中解决键盘问题 ios上原生集成IQKeyBoardManager，具体集成方法请另行百度 android上RN会自动上浮页面 – 碰到如下问题 感觉整个人都不好了，react-native-tab-navigator,是一个很常用的第三方库，在android上选择一个TextInput，然后会发现在首次渲染的时候，tab navigator这个组件是没问题的，...
react实现虚拟键盘支持Ant design Input和普通input Dom元素
qq_25757181的博客
12-11 384
3.使用window Selection对象获取获取焦点输入框光标对象信息，从而获取：当前输入框的值，光标开始位置和结束位置等信息。点击虚拟键盘上，值在输入框（Ant Design Input、或Dom inpu）中响应对应的值，支持在光标位置进行输入字符和删除等 操作，支持响应input onchange事件等功能。例如： 输入框值value=123|456，光标在3和4之间，selectionStart = 3, selectionEnd=3;1.点击虚拟键盘，发送点击按下按键的指令；
React-Native解决键盘弹出遮挡输入框的策略
"在开发React Native应用时，经常会遇到一个问题：当用户在输入框中输入时，软键盘弹出会遮挡到输入框，影响用户体验。本文将介绍如何解决这个问题，确保用户在输入时，输入框始终保持可见。 首先，我们需要引入`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值