ScrollView内嵌FlatList时点击保存按钮需两次触发如何解决？

• 你嵌套的TouchableWithoutFeedback组件拦截了点击事件，它默认的点击行为就是收起键盘，优先级高于ScrollView的keyboardShouldPersistTaps配置，所以你给ScrollView和FlatList加的属性不会生效。
• 额外排查点：检查组件拼写是否正确，React Native官方组件是ScrollView、FlatList（首字母大写），你伪代码里的小写开头写法属于错误写法，部分版本会出现属性不生效的问题。

方案1：移除多余的TouchableWithoutFeedback层 #

如果这层是为了点击空白处收起键盘添加的，完全可以用ScrollView自带能力替代，调整后代码结构如下：

<ScrollView 
  keyboardShouldPersistTaps="handled"
>
  <View>
    <FlatList
      keyboardShouldPersistTaps="handled"
      // 其余FlatList原有属性
    />
    <TouchableOpacity
      onPress={() => {
        // 直接写保存逻辑即可，点击会直接触发，不会优先收起键盘
      }}
    >
      <Text>保存</Text>
    </TouchableOpacity>
  </View>
</ScrollView>

这种配置下，点击空白区域（非输入框、非可点击组件区域）会自动收起键盘，同时点击可点击组件会直接触发对应onPress逻辑，不会被拦截。

方案2：保留TouchableWithoutFeedback的适配方案 #

如果你确实需要保留这层组件，可以修改它的点击逻辑，仅在点击非交互区域时收起键盘：

import { Keyboard } from 'react-native'

// 组件内逻辑
<TouchableWithoutFeedback
  onPress={(e) => {
    // 仅点击目标不是可交互组件时才收起键盘
    if (!e.target._internalFiberInstanceHandleDEV?.memoizedProps?.onPress) {
      Keyboard.dismiss()
    }
  }}
>
  {/* 原有子组件内容 */}
</TouchableWithoutFeedback>

同时保留ScrollView和FlatList的keyboardShouldPersistTaps="handled"属性即可。

方案3：兜底兼容处理 #

如果以上方案都没有生效，可以将保存逻辑绑定到按钮的onPressIn事件，而非onPress：

<TouchableOpacity
  onPressIn={() => {
    // 保存逻辑写在这里，onPressIn触发优先级高于系统键盘收起逻辑
  }}
>
  <Text>保存</Text>
</TouchableOpacity>

点击事件的触发顺序为onPressIn -> 系统处理键盘收起逻辑 -> onPress，用onPressIn可以跳过中间的键盘拦截逻辑，直接触发操作。

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