React Native中如何区分短按onPress与250ms延迟的onLongPress事件

问题根因 #

React Native 官方Touchable系列组件及基于其封装的组件，默认onPress事件在用户抬手时触发，因此长按触发onLongPress后抬手仍会执行onPress绑定的逻辑，需要通过标记位隔离两个事件的执行。

方案一：原有代码最小改造 #

无需修改组件结构，仅新增标记位控制逻辑即可：

import { useRef } from 'react';

// 组件内部逻辑
// 用useRef存储标记，更新同步且不触发重渲染
const isLongPressTriggered = useRef(false);

const onLongPress = () =>{
    isLongPressTriggered.current = true;
    console.log('Pressed long');
    // 此处添加你的长按业务逻辑
}

const onChange = () =>{
    // 仅未触发长按时才执行短按逻辑
    if (!isLongPressTriggered.current) {
        console.log('Pressed');
        // 此处添加你的短按业务逻辑
    }
}

const onPressOut = () => {
    // 延迟重置标记，适配RN事件触发顺序，避免onPress逻辑还没执行标记就被重置
    setTimeout(() => {
        isLongPressTriggered.current = false;
    }, 50);
}

return(
<Container
     onPress={onChange}
     onLongPress={onLongPress}
     delayLongPress={250}
     onPressOut={onPressOut}
>
{/* 子组件内容 */}
</Container>
)

注意：如果你的Container是自定义封装组件，需要确认它已经透传了onLongPress、delayLongPress、onPressOut三个属性到底层的Touchable系列组件，否则配置不会生效。

方案二：Pressable自定义计时（兼容性更强） #

如果封装组件未透传相关属性，或者需要更灵活的交互控制，可以直接基于Pressable自行实现按压计时逻辑，完全绕开默认事件冲突：

import { useRef } from 'react';
import { Pressable } from 'react-native';

// 组件内部逻辑
const pressTimer = useRef(null);

const handlePressIn = () => {
    // 按压开始时启动计时器，250ms后触发长按逻辑
    pressTimer.current = setTimeout(() => {
        console.log('Pressed long');
        // 此处添加你的长按业务逻辑
        // 标记长按已触发
        pressTimer.current = 'triggered';
    }, 250);
}

const handlePressOut = () => {
    if (pressTimer.current && pressTimer.current !== 'triggered') {
        // 250ms内抬手，触发短按逻辑
        clearTimeout(pressTimer.current);
        console.log('Pressed');
        // 此处添加你的短按业务逻辑
    }
    // 重置计时器
    pressTimer.current = null;
}

return(
<Pressable
    onPressIn={handlePressIn}
    onPressOut={handlePressOut}
>
{/* 子组件内容 */}
</Pressable>
)

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