一行代码解决Scrollview和TextInput焦点获取问题
创始人
2024-01-28 22:41:09
0次

前言

业务开发中搜索框和列表的组合页面应该是比较常见的场景，那么有什么坑呢？

最近在开发过程就遇到了一个问题，输入搜索关键词查询接口返回数据后，点击列表项并返回上个页面时，发现需要两次点击，纳尼？页面示意图如下

通过日志以及逻辑分析发现两个问题：

  • 1.第一次点击列表项无法触发onPress点击事件
  • 2.第一次点击其实是使输入框失去焦点并隐藏键盘

知道问题在哪就有解决问题的方向了：点击列表项使输入框自动失去焦点，并触发onPress点击事件。

尝试方案

  • 1.通过点击事件添加Keyboard.dismiss(),并使用输入框ref调用blur()方法
  • 2.通过使用Scrollview包裹整个页面，添加keyboardShouldPersistTaps={‘handled’}设置项（网上方案）

方案结果：

  1. 没有作用
  2. 没有效果，且上面的搜索框会一起滚动

最终方案

通过在技术群沟通，有位群友提出方案

scrollview 容器加 keyboardDismissMode=“on-drag”
实践后，并未解决此问题

最终通过尝试在列表Flatlist中添加属性keyboardShouldPersistTaps={'always'}成功解决

示例代码如下：

// 自定义输入框

{flex: 1}}data={addressList}renderItem={renderItem}ListEmptyComponent={}keyExtractor={(item) => item.id}
/>

附RN中文网对keyboardShouldPersistTaps的解释说明：

最后

写了Android和Flutter混合开发一年多，又开始写RN了，就想一个圆一样。

小伙伴们，你们现在是做RN,Flutter,原生，还是转行了？

欢迎大家在评论区留言。

上一篇：如何成为一个全栈数字化设计师

下一篇：如何对珍贵水生物标本提供三维重建，数字化技术助力长江大保护...

相关内容

热门资讯

幼儿园园长新年寄语 幼儿园园长新年寄语尊敬的家长、亲爱的老师、可爱的孩子们：　　充满着爱心、感动与不平凡的马年和我们渐行...
大年初八开工大吉祝福语录 大年初八开工大吉祝福语录　　在我们平凡的日常里，要用到祝福语的情况还是蛮多的，祝福语的种类很多，可分...
每天一句话经典心情语录大全精... 　　有时候，眼睛看不到的心却看得到;有时候，你给别人最简单的建议，却是自己最难做到的。下面是小编为大...
新年寄语：新年空间留言寄语 新年寄语：新年空间留言寄语（精选80句）　　在生活、工作和学习中，大家都用到过寄语吧，借助寄语人们可...
唯美晚安寄语 常用唯美晚安寄语汇总（精选115句）　　挫折是一块石头，对于弱者来说它是拌脚石，让你停步不前。而对于...
大学老师评语 大学老师评语大学老师评语13.你朴实无华，思想健康，积极上进，你身处逆境，却永不退缩，你不追求享受、...
说谎的经典语录 说谎的经典语录　　语录指一个人的说话记录，一般用于正式文体，通常为了说明一段时间内某人的所说句子和语...
新人入职感言 新人入职感言（通用10篇）　　在平日的学习、工作或生活中，我们常常会对人或者事物有新的思考，这时就可...
几米 《地下铁》经典语录 　　1、我努力寻找希望，生怕幸运就在身边，却被我粗心错过　　——几米《地下铁》　　2、在这个城市里，...
《我的前半生》经典台词语录 　　《我的前半生》，台词美到足以改写后半生,以下是CN人才小编搜集并整理的有关内容，希望对大家有所帮...
小学三年级学生期末评语 小学三年级学生期末评语（通用200句）　　在日常学习、工作和生活中，大家都用到过评语吧，评语能帮助被...
期末教师给学生的评语 期末教师给学生的评语15篇　　在现实生活或工作学习中，许多人都有过写评语的经历，对评语都不陌生吧，评...
初一班主任寄语 初一班主任寄语　　无论是身处学校还是步入社会，要用到寄语的情况还是蛮多的，通过寄语人们可以心中的所思...
学习进步的励志语录 学习进步的励志语录　　在日复一日的学习、工作或生活中，大家都听说过或者使用过一些比较经典的语录吧，语...
安全的文章美文 有关安全的文章美文　　安全是人与生俱来的追求,是人民群众安居乐业的前提,是维持社会稳定和经济发展的保...
在教师节发的朋友圈文案 在教师节发的朋友圈文案（精选270句）　　随着社交网络的普及，越来越多人会在社交平台上发布文案，文案...
母亲节的感人说说 母亲节的感人说说（精选50句）　　随着微信、微博、QQ等社交网络平台的快速发展，越来越多人钟情于在线...
经典美文分享 经典美文分享（精选24篇）　　你所读的所有东西都会给你的大脑带来新的信息，而你永远无法知道什么时候它...
描写山的古诗词摘抄 描写山的古诗词摘抄　　中国朴素的旅游地理最早见之于古代诗歌中。从《诗经》开始，我国历代文人墨客就喜欢...
美文赏析：猫儿山游记 美文赏析：猫儿山游记　　还是清明那会儿，桂林一直是个多雨的季节，想要出去远一点玩一趟，有时还真不容易...