React Native快速触摸时onTouchEnd偶发不触发问题求助

问题场景 #

在React项目中使用touchStart和touchEnd控制弹窗显示，通过布尔状态open（true表示打开，false表示关闭）管理状态，但快速触摸（快速点击并抬起手指）时onTouchEnd无法稳定触发，导致弹窗卡在打开状态，用户无法操作。

当前简化实现 #

const [open, setOpen] = useState(false);

<View
    onTouchStart={(e) => {
      setInitialRight(e.nativeEvent.pageX);
      setOpen(true);
    }}
    onTouchMove={(e) => {
      // Do something
    }}
    onTouchEnd={(_) => {
        setOpen(false);
     }}
/>

优化方案 #

方案1：补充监听onTouchCancel事件

快速触摸时，系统可能将触摸事件判定为touchCancel而非touchEnd（比如触摸动作过快被识别为滑动或其他手势），因此需要同时监听该事件来关闭弹窗：

const [open, setOpen] = useState(false);

<View
    onTouchStart={(e) => {
      setInitialRight(e.nativeEvent.pageX);
      setOpen(true);
    }}
    onTouchMove={(e) => {
      // Do something
    }}
    onTouchEnd={(_) => {
        setOpen(false);
     }}
    // 新增touchCancel事件处理
    onTouchCancel={(_) => {
        setOpen(false);
     }}
/>

方案2：添加延迟关闭的防抖逻辑

通过设置短延迟确保触摸事件有足够时间触发，同时避免误触导致的弹窗频繁切换：

import { useState, useRef } from 'react';

const [open, setOpen] = useState(false);
const closeTimer = useRef(null);

<View
    onTouchStart={(e) => {
      // 清除之前未执行的关闭定时器
      if (closeTimer.current) clearTimeout(closeTimer.current);
      setInitialRight(e.nativeEvent.pageX);
      setOpen(true);
    }}
    onTouchMove={(e) => {
      // Do something
    }}
    onTouchEnd={(_) => {
        // 100ms延迟关闭，可根据实际交互调整时长
        closeTimer.current = setTimeout(() => {
            setOpen(false);
        }, 100);
     }}
    onTouchCancel={(_) => {
        if (closeTimer.current) clearTimeout(closeTimer.current);
        setOpen(false);
     }}
/>

方案3：改用Pressable组件（React Native环境）

如果是React Native项目，官方推荐的Pressable组件对触摸事件的处理更完善，内置了对各种触摸场景的兼容，能有效避免此类问题：

import { Pressable, useState } from 'react-native';

const [open, setOpen] = useState(false);

<Pressable
    // 替代touchStart
    onPressIn={(e) => {
      setInitialRight(e.nativeEvent.pageX);
      setOpen(true);
    }}
    // 替代touchEnd
    onPressOut={(_) => {
        setOpen(false);
     }}
    // 可选：处理完整点击逻辑
    onPress={() => {
        // 此处可添加点击触发的业务逻辑
     }}
>
    {/* 原View中的子内容 */}
</Pressable>

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