React Native：Animated.View内调用onPress时如何禁用动画实现立即跳转

你遇到的问题本质是React Native的Animated动画执行过程中阻塞了JS交互事件，或动画容器捕获了触摸事件导致onPress延迟触发，可通过以下方案解决：

方案1：开启动画原生驱动 #

Animated动画默认在JS线程执行，动画运行时会阻塞JS侧的交互事件响应，开启useNativeDriver: true后动画会交给原生线程处理，不会阻塞JS交互，点击事件可立即触发。
修改你的动画配置代码即可：

// 原动画配置（示例）
Animated.timing(animatedValue, {
  toValue: 1,
  duration: 300,
  useNativeDriver: false // 缺省或设为false时在JS线程执行
}).start()

// 修改后
Animated.timing(animatedValue, {
  toValue: 1,
  duration: 300,
  useNativeDriver: true // 交给原生线程执行
}).start()

注意：开启原生驱动后仅支持修改transform、opacity两类属性，如果你要修改width、padding等布局属性，请使用其他方案。

方案2：调整触摸事件透传规则 #

动画执行过程中Animated容器可能会捕获触摸事件，你可以通过pointerEvents属性调整事件响应规则，让Pressable优先响应触摸：

<Animated.View pointerEvents="box-none">
  <Animated.View style={[styles.headerContainer, titleStyle]} pointerEvents="none">
    <Animated.Text style={styles.verificationTitle}>
      {activationBoxTitle}
    </Animated.Text>
    <ArrowRightWhite />
  </Animated.View>
  <Animated.View style={[styles.container, descriptionContainerStyle]} pointerEvents="box-none">
    <ImageBackground
      style={styles.backgroundImage}
      resizeMode="cover"
      source={images.activateAccBackground}
      pointerEvents="none"
    >
      <Pressable
        pointerEvents="auto"
        onPress={() => navigation.navigate(
          "GeneralQuestions", {
            screen: navigateActivationToPage
          })}>
        <Animated.Text style={descriptionStyle}>
          {activationBoxDescription}
        </Animated.Text>
      </Pressable>
    </ImageBackground>
  </Animated.View>
</Animated.View>

pointerEvents属性说明：

• none：当前视图不响应任何触摸事件，事件直接透传给下层视图
• box-only：当前视图仅响应自身区域的触摸，不拦截子视图的触摸事件
• auto：正常响应所有触摸事件

方案3：点击时主动中断动画再跳转 #

如果前两个方案不适用（比如动画涉及不支持原生驱动的属性），可以在点击触发时先中断正在执行的动画，再执行跳转逻辑：

1. 先存储动画的引用：

import { useRef } from 'react';

// 组件内定义动画引用
const animationRef = useRef(null);

// 启动动画时存储引用
animationRef.current = Animated.timing(animatedValue, {
  toValue: 1,
  duration: 1000,
  useNativeDriver: false
}).start();

2. 修改Pressable的点击逻辑：

<Pressable
  onPress={() => {
    // 中断正在执行的动画
    animationRef.current?.stop();
    // 立即跳转
    navigation.navigate("GeneralQuestions", {
      screen: navigateActivationToPage
    });
  }}>
  <Animated.Text style={descriptionStyle}>
    {activationBoxDescription}
  </Animated.Text>
</Pressable>

内容的提问来源于stack exchange，提问作者Olcay Ertaş