一行代码教你解决Scrollview和TextInput焦点获取问题
更新时间：2022年12月21日 16:02:11 作者：wayne214
这篇文章主要为大家介绍了一行代码教你解决Scrollview和TextInput焦点获取问题，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
前言
业务开发中搜索框和列表的组合页面应该是比较常见的场景，那么有什么坑呢？
最近在开发过程就遇到了一个问题，输入搜索关键词查询接口返回数据后，点击列表项并返回上个页面时，发现需要两次点击，纳尼？页面示意图如下
通过日志以及逻辑分析发现两个问题：
- 1.第一次点击列表项无法触发onPress点击事件
- 2.第一次点击其实是使输入框失去焦点并隐藏键盘
知道问题在哪就有解决问题的方向了：点击列表项使输入框自动失去焦点，并触发onPress点击事件。
尝试方案
- 1.通过点击事件添加Keyboard.dismiss(),并使用输入框ref调用blur()方法
- 2.通过使用Scrollview包裹整个页面，添加keyboardShouldPersistTaps={'handled'}设置项（网上方案）
方案结果：
- 没有作用
- 没有效果，且上面的搜索框会一起滚动
最终方案
通过在技术群沟通，有位群友提出方案
scrollview 容器加 keyboardDismissMode="on-drag" 实践后，并未解决此问题
最终通过尝试在列表Flatlist中添加属性keyboardShouldPersistTaps={'always'}成功解决
示例代码如下：
// 自定义输入框
<CustomizeSearchBar
value={searchText}
actionPress={onActionPress}
placeholder='请输入昵称/地址/姓名/手机号查询' onSearchChange={onSearchChange}/>
<FlatList
keyboardShouldPersistTaps={'always'}
style={{flex: 1}}
data={addressList}
renderItem={renderItem}
ListEmptyComponent={<ListEmpty type={2} />}
keyExtractor={(item) => item.id}
/>
复制代码附RN中文网对keyboardShouldPersistTaps的解释说明：
最后
写了Android和Flutter混合开发一年多，又开始写RN了，就想一个圆一样。
小伙伴们，你们现在是做RN,Flutter,原生，还是转行了？
以上就是一行代码教你解决Scrollview和TextInput焦点获取问题的详细内容，更多关于Scrollview TextInput焦点获取的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Android 自定义View实现芝麻分曲线图效果的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-11-11
本文主要介绍了Android常用的图片加载库的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
详解Android WebView的input上传照片的兼容问题
本篇文章主要介绍了详解Android WebView的input上传照片的兼容问题，非常具有实用价值，需要的朋友可以参考下2017-08-08
这篇文章主要为大家详细介绍了Android实现计算器功能，计算表达式，能计算小数点以及括号，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了Android自定义控件之自定义组合控件，重点介绍一下如何通过自定义组合控件来提高布局的复用，降低开发成本，感兴趣的小伙伴们可以参考一下2016-08-08
Android中自定义控件分为三种：1.自绘控件 2.组合控件 3.继承控件。本篇介绍下自绘控件。下面跟着小编一起来看下吧2017-02-02
这篇文章给大家介绍了Android中Intent传递对象的3种方式，分别是Serializable 方式、Parcelable 方式以及JSON 方式，有需要的朋友们可以一起参考借鉴，下面来一起看看吧。2016-09-09
这篇文章主要介绍了 Android 全局异常捕获实例详解的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要为大家详细介绍了Android实现扫描二维码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
大家好，本篇文章主要讲的是Android一个类实现录音与播放实例，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下2022-02-02
最新评论