React Native按钮onPressOut仅在按压超250ms时触发如何实现？

核心逻辑是通过记录按压开始时间，松开时计算按压时长判断是否执行目标逻辑即可，具体实现如下：

• 用useRef存储按压开始的时间戳，无需触发组件重渲染，性能更优
• 绑定onPressIn事件，用户开始按压时记录当前时间
• 修改onPressOut事件逻辑，计算按压时长，仅当时长≥250ms时执行原有逻辑

完整代码示例：

import { useRef } from 'react';

// 组件内部逻辑
const pressStartTime = useRef(0);

const onChangeCurtain = () =>{
      setActive(!active);
      onPressItem();
}

const handlePressIn = () => {
  pressStartTime.current = Date.now();
}

const handlePressOut = () => {
  const pressDuration = Date.now() - pressStartTime.current;
  // 仅按压时长超过250ms才执行原有逻辑
  if (pressDuration >= 250) {
    setActive(false);
  }
}

return (
  <Container
       onPress={onChangeCurtain}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
  />
)

补充说明：React Native 所有 Touchable 系列组件默认都支持onPressIn、onPressOut事件，无需额外配置。如果你的Container是自定义封装的组件，确保已经把这两个事件透传给内部的 Touchable 容器即可。

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