react-native登录页面切换TextInput框键盘隐藏问题解决

最新推荐文章于 2021-07-13 11:55:49 发布
最新推荐文章于 2021-07-13 11:55:49 发布
阅读量954 收藏
点赞数 2
分类专栏： react-native开发 文章标签： react-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42368597/article/details/95603423
版权

工作中遇到的一个问题，实现一个报名信息填写的页面，不同TextInput填写切换时键盘会隐藏，十分影响用户体验
在这里插入图片描述
是因为在TextInput外层嵌套了ScrollView标签导致的这个问题，

  • 解决方法：
  • 将ScrollView组件的keyboardShouldPersistTaps属性设置为true即可保持键盘展开
  • <ScrollView keyboardShouldPersistTaps={true}>
张瑞东
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-native-otp-textinput:文本视图可用于OTP引脚实现
05-24
以下道具适用于该组件以及react native TextInput组件支持的道具 Struts 类型 可选的 默认 描述 默认值 细绳 是的 '' 可以基于从父容器收到的OTP / Pin设置默认值。 handleTextChange 功能 不 不适用 以所有...
解决React Native中ScrollView中控件获得焦点及点击空白处键盘消失的问题
淡淡的幸福的博客
01-24 1万+
大家好，今天讲下在开发RN过程中使用ScrollView控件出现的问题。 最初的开发需求是显示一个界面，这个界面有两个特点: 1)纵向很长，显示的内容有点多 2)界面的下半部分中有TextInput控件 要想满足第一个条件，首先想到的是将显示的这些内容最外层加上一层ScrollView控件包裹，经过测试，确实是可以的。 TextInput控件后面根了一个删除按钮，删除按钮
React Native输入框获取输入的内容、输入框的密码类型
专注前端技术，包括Web端、移动端、小程序、APP
09-06 3086
RN并没有form表单，所以想要获取输入的内容，我们必须采取其他方式。 rn提供了以下几个方法可以获取输入的值： onChangeText 当文本框内容变化时调用此函数。改变后的文字内容会作为参数传递。 onChange 当文本框内容变化时调用此回调函数。回调参数为{ nativeEvent: { eventCount, target, text} }。 我们可以利用onChageText来获取到内容。 首先我们定义state值，用于暂存用户输入的内容。 export default class L
react native ，隐藏TextInput
H_Ydd的博客
08-08 1459
动态控制文本输入框的显示与隐藏为后面实现仿微信朋友圈 constructor(props) {    es6的写法         super(props);         this.state = {              TextInputShow:false,  //根据TextInputShow的值来控制底部文本输入框的显示和隐藏              text:'
rn 手动隐藏键盘、点击空白处隐藏键盘
weixin_43294560的博客
09-02 2553
1、导入 import {Keyboard} from 'react-native'; 2、手动隐藏键盘 在事件中设置:Keyboard.dismiss(); 3、点击空白处隐藏键盘 方式一: 使用ScrollView作为父及以上容器 方式二: 使用TouchableWithoutFeedback组件,该按钮组件无任何视觉反馈效果 使用TouchableWithoutFeedback在外层包裹,onPress事件中设置Keyboard.dismiss(); 子元素要占据全屏
ReactNative[IOS]点击空白位置无法隐藏键盘
wayne214的博客
12-03 980
最近在开发项目的需求中，测试同学提了一个bug,在如下页面中，有三个输入框，在iOS手机上，输入完之后，无法隐藏键盘；安卓手机上，键盘都有收起按钮，所以没有这个问题。 想到的解决方案： 1、让输入框失去焦点， 2、点击背景空白位置，监听键盘Keyboard事件，调用dismiss()方法隐藏软键盘。 以上两个方案，都需要写一堆代码，忽然想到之前有类似的页面需求，重新review了一下代码，发现只...
react-native-input-scroll-view：完美的TextInput ScrollView
02-05
react-native-input-scroll-view 主要实现以下功能： 当键盘弹出时， TextInput将自动调整到键盘顶部。 当键盘弹出时， ScrollView的内容不会被键盘遮挡。 当多行TextInput获得焦点时，所选光标将自动调整到键盘...
react-native-selectable-text：捕获文本选择并自定义操作菜单
02-05
React本机可选文本演示版安卓的iOS用法import { SelectableText } from "@astrocoders/react-native-selectable-text" ;// Use normally, it is a drop-in replacement for react-native/Text< SelectableText ...
react-native-security-keyboard:安全键盘，重新实现的TextInput，功能更强大
05-13
安全键盘，重新实现了TextInput，功能更强大。 安装 可以通过npm或yarn进行安装： npm i react-native-security-keyboard --save yarn add react-native-security-keyboard 用法 导入react-native-security-keyboard...
react-native-floating-input:软键盘上浮动的布局，支持Android和IOS
04-30
react-native-floating-input入门$ npm install react-native-floating-input --save 或者$ yarn add react-native-floating-input 大多是自动安装$ react-native link react-native-floating-input 世博会小吃游乐...
《React-Native系列》33、 键盘遮挡问题处理
等待就是浪费青春
09-23 1万+
最近在项目中，使用TextInput组件的时候，发现键盘弹出的时候，遮盖了表单。咨询了下做iOS的同学，他们的处理是计算键盘的高度和当前输入域的位置，将界面向上移动一段距离。那在ReactNative中是否也可以有类似的处理方法呢？答案是肯定的，我们使用ScrollVIew的scrollTo方法，我们也主要是讲这种方法。具体方案如下：组件render方法中使用ScrollView，并且设置scro
react native ScrollView 使用详解
热门推荐
老孟Flutter
04-18 1万+
ScrollView 是一个滚动控件，当内容显示不全时可以通过滚动显示。属性： View props… :View的所有属性 contentContainerStyle：内容容器的样式，所有的子视图都会包裹在内容容器内。 horizontal：为true时，横向滚动 keyboardDismissMode ：用户拖拽滚动视图的时候，是否要隐藏软键盘。 non
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...
RN的文本框 获取焦点但隐藏键盘 React Native TextInput onfocus but hide keyboard
DreamHeaven
11-07 2489
After a lot of research, I was able to find a monkey patch for this issue on Android (I’m currently developing an Android app only). We should create a Native Module that calls InputMethodManager to c...
简易ReactNative高阶组件实现自动隐藏键盘功能
weixin_33979745的博客
01-13 484
2019独角兽企业重金招聘Python工程师标准>>> ...
React native 收起键盘
zcylyzhi4的博客
07-13 759
// 引入 import { Keyboard } from 'react-native'; // 在需要隐藏键盘的方法中，加入如下代码即可实现键盘隐藏 Keyboard.dismiss();
《React-Native系列》39、 ReactNative之键盘Keyboard
等待就是浪费青春
10-12 1万+
今天我们来说下RN对键盘事件的支持。在react-native 的Component组件中有个Keyboard.github地址如下：https://github.com/facebook/react-native/tree/770091f3c13f7c1bd77c50f979d89a774001fbf0/Libraries/Components/Keyboard我们先来看下官方提供的例子，监听键
React Native - Keyboard API使用详解（监听处理键盘事件）
大灰狼的小绵羊哥哥的博客
10-20 9203
当我们点击输入框时，手机的软键盘会自动弹出，以便用户进行输入。但有时我们想在键盘弹出时对页面布局做个调整，或者在程序中使用代码收起这个软键盘，这些借助 React Native 框架提供的Keyboard API 就可以实现。 一、Keyboard API 提供的方法 Keyboard API 提供如下的静态函数供开发者使用。 1，addListener(even
React-native滑动屏幕软键盘消失
海无痕的博客
04-28 2626
（一）问题描述 在输入框中写入内容时，填写完毕时滑动屏幕时希望键盘自动消失。 （二）方法 在ScrollView中有keyboardDismissMode属性，该属性可以三种值，分别为none、on-drag、interactive。 1、'none'，（默认值），拖拽时不隐藏软键盘。 2、‘on-drag'，当拖拽开始的时候隐藏软键盘。 3、'interactive'，软键盘伴随拖拽
react-native link react-native-pdf zsh: command not found: react-native
最新发布
12-29
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。 以下是在Windows和Mac上安装和配置react-native-cli的步骤： Windows： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张瑞东

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值