React Native FlatList：滚动时不关闭键盘，仅点击项时关闭

1. 核心思路：手动控制键盘收起逻辑 #

默认情况下，FlatList（继承自ScrollView）滚动时会触发输入框失焦，导致键盘自动关闭。我们需要修改这个行为，把键盘收起的时机完全交由列表项的点击事件控制：

• 将keyboardShouldPersistTaps设为'always'，阻止滚动和点击触发默认的键盘关闭行为
• 在列表项的点击事件中手动调用键盘收起方法

2. 代码实现示例 #

import { Keyboard, FlatList, TouchableOpacity } from 'react-native';

const YourComponent = () => {
  // 列表项点击时手动关闭键盘，并执行你的业务逻辑
  const handleItemPress = (item) => {
    Keyboard.dismiss();
    // 这里添加点击项后的业务处理，比如跳转详情、更新状态等
  };

  return (
    <FlatList
      data={yourDataSource}
      keyboardShouldPersistTaps="always"
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => handleItemPress(item)}>
          {/* 你的列表项内容，比如文本、图片等 */}
        </TouchableOpacity>
      )}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

3. 关键细节说明 #

• keyboardShouldPersistTaps="always"：让FlatList在滚动、点击时都保持键盘处于开启状态，完全禁用系统默认的键盘收起逻辑
• Keyboard.dismiss()：React Native提供的手动关闭键盘API，仅在用户点击列表项时触发，精准控制键盘收起时机
• 如果列表项内部包含可交互组件（如TextInput、Button），需要注意事件冒泡逻辑，可通过pointerEvents或嵌套点击事件处理避免冲突

内容的提问来源于stack exchange，提问作者paperskyline