ScrollView导致onPress事件需点击两次才触发，如何解决该问题？

在React Native中，当TouchableWithoutFeedback嵌套在ScrollView内部时，ScrollView的触摸事件拦截机制会导致第一次点击被ScrollView捕获，第二次才能触发Touchable组件的onPress事件。

解决这个问题最直接的方式是调整ScrollView的触摸事件传递策略，通过设置keyboardShouldPersistTaps属性来避免事件被拦截：

• 设置keyboardShouldPersistTaps='handled'：当子组件（比如这里的TouchableWithoutFeedback）能处理触摸事件时，ScrollView不会拦截该事件，确保点击一次就能触发onPress。
• 如果你的场景不需要ScrollView在触摸时拦截事件，也可以设为'always'，强制ScrollView不拦截任何触摸操作。

修改后的代码如下：

<ScrollView keyboardShouldPersistTaps='handled'>
    <View style={styles.container}>
      <Popup />
      <ImgsContainer />
      <Inputs/>
      <TouchableWithoutFeedback onPress={() => submitData()}>
        <View style={styles.postBtn}>
          <Text style={styles.btnText}>POST</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
</ScrollView>

另外，也可以尝试替换Touchable组件，比如用TouchableOpacity或TouchableNativeFeedback替代TouchableWithoutFeedback，这类组件的触摸事件处理逻辑和ScrollView兼容性更好，部分场景下也能解决点击两次的问题。

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