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

最新推荐文章于 2024-08-22 10:00:18 发布
最新推荐文章于 2024-08-22 10:00:18 发布
阅读量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
关注
专栏目录
react-native键盘弹起遮挡输入框
shizhihua11的博客
04-03 775
import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, Image, FlatList, Dimensions, WebView, TouchableOpacity, TextInput, Na...
react-Reactnative仿支付宝密码输入框
08-15
React Native提供了一系列的调试工具，如`React Native Debugger`和`Chrome DevTools`，帮助开发者定位和解决问题。 以上就是基于React Native仿支付宝密码输入框的主要技术点。在`react-native-password-pay-...
React Native Keyboard-Aware Scroll View 教程
最新发布
gitblog_01178的博客
08-22 309
React Native Keyboard-Aware Scroll View 教程 react-native-keyboard-aware-scroll-viewA ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.项目地址:https://g...
React-native键盘遮挡输入框问题的解决
weixin_30270561的博客
01-07 268
　　2016年10月25日更新： 　　现在有一个更准确一点的做法是用一个View包裹住TextInput，然后通过该View的onLayout方法获取该输入框的y轴位置，再减去一个适当的高度去处理scrollview的滚动，如下所示： <View onLayout={this._downloadLayout.bind(this)} style={{marginLeft:15,f...
react native 键盘遮挡输入框的问题
Elaine20132014的博客
10-09 1214
1.在写react native时会碰到弹起的键盘遮挡住输入框的问题 官网给出了解决方案：https://reactnative.cn/docs/keyboardavoidingview#docsNav keyboardavoidingview可以解决这个问题 需要给参数behavior={"position/height/padding"} keyboardVerticalOffset给值一般是给键盘的高度 2.rn获取键盘高度方法 import { Keyboard } from 'rea
react native 解决键盘弹起遮挡输入框问题
三七二十一的博客
07-13 4676
问题:使用Textinput组件时,ios模拟器软键盘弹出会遮挡住输入框. 如何调出软键盘: 解决思路:(其他情况类似) 1、Textinput在ScrollView中 当弹出软键盘时,计算软键盘的高度,state设置ScrollView的paddingBottom值加上软键盘的高度 2、Textinput固定在屏幕底部 当弹出软键盘时,计算软键盘的高度,state设置Textin...
React Native 键盘挡住输入框解决方法
koufulong的博客
02-20 854
一、使用ref 选中外层的ScrollView标签 二、在componentDidMount方法中对键盘进行监听 // 监听键盘 this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardDidShow); this.keyboardWillHide...
react在安卓中输入框被手机键盘遮挡问题的解决方法
12-09
前言 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 本文主要介绍了关于react在安卓输入框被键盘遮挡的相关内容，分享出来动大家参考学习，下面话不多说了，来一起看看详细的介绍吧 问题概述 今天遇到了一个问题，在安卓手机上，当我要点击输入“店铺名称”时，手机软键盘弹出来刚好把输入框挡住了；挡住就算了，关键是页面还不能向上滑动，整个手机窗口被压为原来的二分之一左右； 然后 然后找了一些方案，不过不大适用
GNKeyboardAwareScrollView
05-12
GNKeyboardAwareScrollView 欢迎使用支持键盘的UIScrollView 该库包括： GNKeyboardAwareScrollView-调整键盘外观的可到达区域 GNTextFieldsManager-帮助处理多个文本字段并通过next键盘按钮在它们之间进行导航 安装方式 您可以直接下载源代码并将其导入到您的项目中，或者使用cocoapods ： pod "GNKeyboardAwareScrollView" GNKeyboardAwareScrollView 许多开发人员都在为带有键盘的UIScrollView奋斗。 此类有助于减轻观察键盘通知的痛苦，并自动调整它的contentInset以确保可以到达整个滚动区域。 您需要做的就是将其添加为子视图。 它处理其他所有事情。
React Native笔记(三)：解决在RN中使用Android原生WebView时输入框被遮挡问题
ZBM来了
04-27 966
如题，在解决该问题前，上网搜了一下资料，找到了下面这个方案： Android webView输入框软键盘遮挡问题-终极解决方案(不好使你打我) 但是，这在纯原生上可行，在rn上却没有效果。主要原因是rn有自己的一套布局测量绘制机制，导致在原生调用requestLayout()没有响应，经过几次实践，得出下面针对rn的解决办法。 重写WebView的requestLayout方法，rn绘制时主动通知原生重新布局WebView public class CusWebView extends WebView{
rn android软键盘遮挡布局处理,React-native 关于键盘遮挡界面问题
weixin_36399446的博客
05-26 251
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 405
推荐使用：react-native-avoid-softinput - 解决React Native应用键盘遮挡问题的专业方案 react-native-avoid-softinput Native solution for common React Native problem of focused views bei...
React Native 应用在键盘弹出时优雅地响应
热门推荐
大灰狼的小绵羊哥哥的博客
06-09 1万+
在使用 React Native 应用时，一个常见的问题是当你点击文本输入框时，键盘会弹出并且遮盖住输入框。就像这样： 有几种方式可以避免这种情况发生。一些方法比较简单，另一些稍微复杂。一些是可以自定义的，一些是不能自定义的。今天，我将向你展示 3 种不同的方式来避免 React Native 应用中的键盘遮挡问题。 文章中所有的代码都托管在 GitHub 上 Key
通过 react-native-keyboard-aware-scroll-view 解决键盘遮盖输入框的问题
weixin_33994444的博客
09-04 1250
1.安装 yarn add react-native-keyboard-aware-scroll-view 2.引入 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' 3.调用 &lt;KeyboardAwareScrollView&gt; &lt;View&gt; ...
推荐开源项目：React-Native-Keyboard-Aware-ScrollView
gitblog_00074的博客
04-17 457
推荐开源项目：React-Native-Keyboard-Aware-ScrollView react-native-keyboard-aware-scrollviewCreated by artald项目地址:https://gitcode.com/gh_mirrors/re/react-native-keyboard-aware-scrollview 项目简介 在移动应用开发中，特别是在使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值