React Native：如何在单次点击中同时收起键盘并响应Touchable点击

问题根源 #

当TextInput获得焦点弹出软键盘时，第一次点击FlatList中的TouchableOpacity，系统会优先响应「触摸外部区域收起键盘」的默认行为，导致点击事件被消费，无法触发onPress回调，因此需要两次操作才能完成目标。

解决方案 #

无需更换组件或调整JSX结构，只需在点击事件中主动处理键盘收起即可：

1. 导入Keyboard模块
   从React Native核心库中引入Keyboard工具：

   import { Keyboard } from 'react-native';
   

2. 修改handlePress函数
   在触发业务逻辑前，先调用Keyboard.dismiss()主动收起键盘，确保一次点击同时完成两个操作：

   const handlePress = (item) => {
     Keyboard.dismiss();
     // 这里执行你的业务逻辑，例如跳转页面、处理数据等
     console.log('点击了条目:', item);
   };
   

额外优化（可选） #

如果希望在点击搜索栏以外的任意区域都自动收起键盘，可以用TouchableWithoutFeedback包裹根容器，并添加触摸事件处理：

import { TouchableWithoutFeedback } from 'react-native';

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
  <ScreenContainer>
    {/* 原有代码 */}
  </ScreenContainer>
</TouchableWithoutFeedback>

这种方式可以让用户点击页面任意非输入区域都收起键盘，同时不影响TouchableOpacity的点击事件响应。

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