React Native - 單擊 Flatlist 的項目（搜索列表后）

Question

我有 Flatlist 和 TextInput 作為 ListHeaderComponent 上的搜索欄。 當我填寫TextInput並單擊平面列表的項目（使用TouchableOpacity）時，只有一個鍵盤關閉動作，它需要第二次單擊才能從平面列表中獲取select項目

任何解決方案？

Answer 1

將keyboardShouldPersistTaps屬性添加到 FlatList。

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

在此Github 問題中提出了類似的建議。 但是，您沒有使用 ScrollView。 盡管 FlatList 沒有被記錄為具有keyboardShouldPersistTaps道具，但它確實擁有它，因為 FlatList 是“圍繞<VirtualizedList>的便利包裝，因此繼承了它的道具（以及<ScrollView>的道具）”。 資源

替代方案：關閉 TextInput 搜索處理程序中的鍵盤，這就是 Gmail 應用程序進行搜索的方式。 一旦您的用戶完成輸入並按下提交， Keyboard.dismiss() 。 如果用戶不需要“提交”，這將不起作用，就像大多數瀏覽器應用程序的工作方式一樣。