React Native - 单击 Flatlist 的项目（搜索列表后）

Posted 2023-03-12

【中文标题】React Native - 单击 Flatlist 的项目（搜索列表后）

【英文标题】：React Native - Click item of Flatlist (after searched the list)

【发布时间】：2020-04-14 04:37:05

【问题描述】：

我将 Flatlist 和 TextInput 作为 ListHeaderComponent 上的搜索栏。 当我填写 TextInput 并单击 flatlist 的项目（使用 TouchableOpacity）时，只有一个键盘关闭动作，它需要第二次单击才能从 flatlist 中选择项目

有什么办法吗？

【问题讨论】：

任何代码？如果我们看不到您的代码在做什么，我们无法帮助您。请提供您的代码的Minimal, Complete, and Reproducible 示例，并详细说明未按预期工作的内容、您尝试过的内容以及您的预期结果。

【参考方案1】：

将 keyboardShouldPersistTaps 属性添加到 FlatList。

<FlatList
  keyboardShouldPersistTaps='handled'
  data=...      
  renderItem=...
... />

在此Github issue 中提出了类似的建议。但是，您没有使用 ScrollView。尽管 FlatList 没有记录到具有 keyboardShouldPersistTaps 属性，但它确实有，因为 FlatList 是“<VirtualizedList> 的便利包装，因此继承了它的属性（以及 <ScrollView> 的属性）”。 source

替代方案：在 TextInput 搜索处理程序中关闭键盘，这就是 Gmail 应用程序的搜索方式。一旦您的用户完成输入并按下提交，Keyboard.dismiss()。如果用户不需要“提交”，这将不起作用，就像大多数浏览器应用程序的工作方式一样。