一行代码教你解决Scrollview和TextInput焦点获取问题
作者:wayne214 时间:2022-03-25 21:34:58
前言
业务开发中搜索框和列表的组合页面应该是比较常见的场景,那么有什么坑呢?
最近在开发过程就遇到了一个问题,输入搜索关键词查询接口返回数据后,点击列表项并返回上个页面时,发现需要两次点击,纳尼?页面示意图如下
通过日志以及逻辑分析发现两个问题:
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,原生,还是转行了?
来源:https://juejin.cn/post/7166987535216803848
标签:Scrollview,TextInput,焦点获取
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Android Studio安装配置方法图文详细教程
2023-01-08 23:10:16
![](https://img.aspxhome.com/file/2023/6/116046_0s.png)
Spring Boot启动端口修改方法
2022-11-21 19:37:53
关于mybatis一对一查询一对多查询遇到的问题
2022-01-26 05:25:12
![](https://img.aspxhome.com/file/2023/4/75414_0s.jpg)
Java编写网上超市购物结算功能程序
2021-10-29 13:55:52
![](https://img.aspxhome.com/file/2023/8/106128_0s.png)
Java中的多态用法实例分析
2021-07-11 18:36:35
![](https://img.aspxhome.com/file/2023/8/77098_0s.png)
Java如何使用httpclient检测url状态及链接是否能打开
2022-07-03 21:23:25
java学习DongTai被动型IAST工具部署过程
2023-06-21 09:43:03
![](https://img.aspxhome.com/file/2023/7/64397_0s.png)
Spring Cloud + Nacos + Seata整合过程(分布式事务解决方案)
2021-08-31 04:26:52
![](https://img.aspxhome.com/file/2023/4/63734_0s.png)
Java后台批量生产echarts图表并保存图片
2023-11-25 03:24:39
解决Mybatis-plus和pagehelper依赖冲突的方法示例
2022-06-28 16:52:59
![](https://img.aspxhome.com/file/2023/6/78226_0s.jpg)
maven之packaging标签的使用
2021-10-25 05:14:42
![](https://img.aspxhome.com/file/2023/5/62685_0s.png)
Java中的Object类详细介绍
2023-11-23 23:18:46
android实现图片橡皮擦和快速染色功能
2023-09-08 01:30:02
![](https://img.aspxhome.com/file/2023/2/88112_0s.png)
Java中BufferedReader和BufferedWriter使用方式
2022-01-06 15:06:05
![](https://img.aspxhome.com/file/2023/9/75779_0s.png)
利用maven引入第三方jar包以及打包
2023-11-15 04:23:17
![](https://img.aspxhome.com/file/2023/0/59010_0s.jpg)
Qt 使用QDialog实现界面遮罩的示例(蒙版)
2022-10-31 07:58:37
![](https://img.aspxhome.com/file/2023/6/109776_0s.jpg)
深入理解Java设计模式之备忘录模式
2023-09-20 06:16:43
![](https://img.aspxhome.com/file/2023/3/58433_0s.jpg)
c# 基于wpf,开发OFD电子文档阅读器
2023-09-08 00:10:02
![](https://img.aspxhome.com/file/2023/9/88419_0s.png)
C#中DataSet转化为实体集合类的方法
2022-05-09 00:50:46
python调用java的Webservice示例
2021-07-31 13:36:09