undefined 不是试图在组件中使用 setTimeout 的对象（评估“fun.__callAsync”）

Posted 2023-02-19

【中文标题】undefined 不是试图在组件中使用 setTimeout 的对象（评估“fun.__callAsync”）

【英文标题】：undefined is not an object (evaluating 'fun.__callAsync') trying to use setTimeout in a component

【发布时间】：2021-12-19 11:13:23

【问题描述】：

我正在使用 React Native 和 Reanimated，我希望动画在 2 秒后播放。 当用户移动卡片时，卡片应在其新位置停留 2 秒，然后移回原位。 这就是我所拥有的：

  const panGesture = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>(
onActive: event => 
  translateX.value = event.translationX;
  if (event.translationX <= 0) 
    // disabling swiping from right to left
    translateX.value = 0;
  
,
onEnd: event => 
  const shouldStick = translateX.value >= TRANSLATE_X_THRESHOULD;
  if (shouldStick) 
    translateX.value = withTiming(120);
    runOnJS(moveBack)(translateX);
   else 
    translateX.value = withTiming(0);
  
,
);

我尝试使用 setTimeOut 计算 2 秒，然后更新 translateX，但我收到此错误：

undefined is not an object (evaluating 'fun.__callAsync')

这是 moveBack 函数：

const moveBack = (translateX: Animated.SharedValue<number>) => 
console.log("TRANSLATEX: " + translateX);

setTimeout(() => 
  translateX.value = 0;
, 2000);

我什至没有看到TRANSLATEX 日志，所以我猜它甚至不会到达那里。 我真的不知道问题出在哪里，也不知道该怎么说，所以我可以找到解决方案。

【参考方案1】：

解决方案比我想象的要容易得多。 我正在使用 Reanimated 2.2.0 并且有 withDelay 选项可以添加到动画中，效果很好。

这是我在translateX.value = withTiming(120); 之后添加的（而不是 runOnJs 行）：

translateX.value = withDelay(2000, withTiming(0));

所以在将 translateX 设置为 120 之后，它会等待 2 秒，然后将值设置回 0。