如何从手势处理程序的onStart内部调用函数（React-Native）

Question

每次我尝试从手势处理程序的 onStart 内部调用函数时，应用程序都会崩溃。我尝试过使用 runOnJS、runOnUI、添加“worklet”，但似乎没有任何效果。

有人可以帮我弄清楚如何修改我的代码来修复它吗？

这是我的代码：

  const pullingToMatchGestureHandler = useAnimatedGestureHandler({
    onStart: () => {
      animateShakeValue(); // <----- this crashes my app
    },
    onActive: (event) => {
      const direction = 0;
      const distance = Math.sqrt(
        Math.pow(event.translationX, 2) + Math.pow(event.translationY, 2)
      );
      if (event.translationX > 0 && -event.translationY > 0) {
        direction = Math.atan(-event.translationY / event.translationX);
      } else if (event.translationX < 0 && -event.translationY > 0) {
        direction =
          Math.PI + Math.atan(-event.translationY / event.translationX);
      } else if (event.translationX < 0 && -event.translationY < 0) {
        direction =
          Math.PI + Math.atan(-event.translationY / event.translationX);
      } else if (event.translationX > 0 && -event.translationY < 0) {
        direction =
          2 * Math.PI + Math.atan(-event.translationY / event.translationX);
      }

      let rotationInRad = (rotation.value * Math.PI) / 180;
      rotationInRad = -rotationInRad + Math.PI / 2;
      while (rotationInRad < 0) {
        rotationInRad = rotationInRad + 2 * Math.PI;
      }
      const differenceAngle = rotationInRad - direction;
      if (
        -distance * Math.cos(differenceAngle) > 0 &&
        -distance * Math.cos(differenceAngle) < window.width / 5
      )
        pullDistance.value = -distance * Math.cos(differenceAngle) * 2.5;
    },
    onEnd: (event) => {
      pullDistance.value = 0;
    },
  });

  const animateShakeValue = () => {
    const EASING = Easing.elastic(1.5);
    runOnJS(console.log)("animate");

    rotation.value = withSequence(
      // deviate left to start from -ANGLE
      withTiming(-10, { duration: 100 / 2, easing: EASING }),
      // wobble between -ANGLE and ANGLE 7 times
      withRepeat(
        withTiming(10, {
          duration: 100,
          easing: EASING,
        }),
        7,
        true
      ),
      // go back to 0 at the end
      withTiming(0, { duration: 100 / 2, easing: EASING })
    );
  };

Answer 1

animateShakeValue

函数可能需要是一个工作集。

const animateShakeValue = () => {
    'worklet'; // here
    const EASING = Easing.elastic(1.5);
    runOnJS(console.log)("animate");

    rotation.value = withSequence(
      // deviate left to start from -ANGLE
      withTiming(-10, { duration: 100 / 2, easing: EASING }),
      // wobble between -ANGLE and ANGLE 7 times
      withRepeat(
        withTiming(10, {
          duration: 100,
          easing: EASING,
        }),
        7,
        true
      ),
      // go back to 0 at the end
      withTiming(0, { duration: 100 / 2, easing: EASING })
    );
  };