React Native中onPressOut拖拽时触发，如何正确检测用户松开屏幕的时机？

问题原因 #

onPressOut的触发逻辑是触摸点离开绑定事件的组件区域就会触发，不管是拖拽移出还是真正抬起手指，所以会出现你遇到的误触发问题。

解决方案 #

根据你的实际需求选对应方案即可：

方案1：仅监听「正常点击后松开」的场景 #

如果你的需求是只有用户完成完整的点击动作（按下后没有拖拽离开组件、最终松开）才触发回调，直接用Touchable系列组件自带的onPress回调即可，这个回调原生已经做了拖拽场景的过滤，只有符合正常点击逻辑的松开动作才会触发。
示例代码：

<TouchableOpacity
  onPressIn={() => {
    console.warn('Pressed!');
  }}
  onPress={() => {
    console.warn('Released');
  }}
>
  {/* 业务组件内容 */}
</TouchableOpacity>

方案2：监听所有「手指离开屏幕」的场景 #

如果你需要不管用户中途有没有拖拽、只要手指抬起离开屏幕就触发回调，用React Native官方提供的PanResponder做精细化触摸检测即可，它的onPanResponderRelease回调只会在手指真正抬起时触发，完全符合你要的精准检测需求。
示例代码：

1. 首先导入依赖
   import { PanResponder, View } from 'react-native';
2. 组件内创建PanResponder实例

const panResponder = PanResponder.create({
  // 声明需要响应当前触摸事件
  onStartShouldSetPanResponder: () => true,
  // 触摸按下时触发
  onPanResponderGrant: () => {
    console.warn('Pressed!');
  },
  // 手指抬起离开屏幕时触发，拖拽不会触发
  onPanResponderRelease: () => {
    console.warn('Released');
  }
});

3. 绑定到需要监听的视图上

<View {...panResponder.panHandlers}>
  {/* 业务组件内容 */}
</View>

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