如何在TouchableOpacity的onPress与onPressIn间添加延迟？

先把动画逻辑和 onPressIn 要执行的逻辑拆成独立函数，再通过 setTimeout 给 onPressIn 的执行加上延迟，就能实现先触发 onPress、延迟后执行 onPressIn 逻辑的效果：

// 抽离原onPress的动画逻辑
const handlePress = () => {
  Animated.timing(fadeAnim, {
    toValue: 0,
    duration: 300,
    useNativeDriver: false
  }).start();
};

// 抽离原onPressIn要执行的逻辑
const handlePressIn = () => {
  // 这里填写你原本要在onPressIn里执行的代码
};

// 组合延迟触发逻辑
const handlePressWithDelay = () => {
  // 先执行onPress的动画
  handlePress();
  // 延迟指定时间后执行onPressIn逻辑（示例延迟500ms，可自行调整）
  setTimeout(() => {
    handlePressIn();
  }, 500);
};

// 组件调用
<TouchableOpacity
  onPress={handlePressWithDelay}
  // 注意：此处不再绑定原onPressIn属性，避免重复触发
>
  {/* 你的子组件内容 */}
</TouchableOpacity>

额外注意 #

• 可根据需求修改 setTimeout 的延迟毫秒数
• 若组件存在卸载场景，要在卸载时清理定时器防止内存泄漏：

  useEffect(() => {
    let timerId;
    const delayedPress = () => {
      handlePress();
      timerId = setTimeout(() => handlePressIn(), 500);
    };
    // 组件卸载时清除定时器
    return () => clearTimeout(timerId);
  }, [fadeAnim]);
  

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