React Reanimated 3：如何条件性使用预定义退出动画？

可以实现基于共享值的条件性退出动画切换，但你当前的代码存在两个问题：

• onExit函数缺少return关键字，没有明确返回动画
• 直接在普通JS函数中访问共享值wasChosen.value，无法正确响应其变化，也不符合Reanimated的工作流要求

以下是两种正确的实现方式：

方式一：直接在exiting属性中使用条件表达式 #

如果只需要在退出动画触发时判断一次wasChosen的当前值，这种方式最简单：

import Animated, { useSharedValue, ZoomIn, ZoomOut } from 'react-native-reanimated';

const wasChosen = useSharedValue(false);

// Panresponder 代码：拖动到特定位置时将 wasChosen.value 设为 true

<Animated.View exiting={wasChosen.value ? ZoomIn : ZoomOut} />

方式二：使用worklet函数封装逻辑 #

如果需要封装更复杂的判断逻辑，或者要确保响应共享值的变化（退出动画触发后通常不会中途变更，但此方式更严谨），可以用带worklet指令的函数：

import Animated, { useSharedValue, ZoomIn, ZoomOut } from 'react-native-reanimated';

const wasChosen = useSharedValue(false);

const exitAnimation = () => {
  'worklet';
  return wasChosen.value ? ZoomIn : ZoomOut;
};

// Panresponder 代码：拖动到特定位置时将 wasChosen.value 设为 true

<Animated.View exiting={exitAnimation} />

注意：确保ZoomIn和ZoomOut是从react-native-reanimated正确导入的预定义退出动画，它们本身是符合Reanimated动画规范的配置对象。

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