前言
业务开发中搜索框和列表的组合页面应该是比较常见的场景，那么有什么坑呢？
最近在开发过程就遇到了一个问题，输入搜索关键词查询接口返回数据后，点击列表项并返回上个页面时，发现需要两次点击，纳尼？页面示意图如下
通过日志以及逻辑分析发现两个问题：
-
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,原生，还是转行了？
欢迎大家在评论区留言。
— END —
原文始发于微信公众号（君伟说）：一行代码解决Scrollview和TextInput焦点获取问题
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/115143.html
