Reactnative 复活的夹子在Panguesture上崩溃

他们的clamp钩子在我的项目中也不可用，尽管我使用的是3.3.0.一种解决方案是使用自定义挂钩.然而，when react-native-reanimated is installed, the callbacks passed to the gestures are automatically workletized and run on the UI thread when called.因此，使用普通的JAVASCRIPT function会导致崩溃.

• 一种方法是使用runOnJS(true).
• 另一种方法是使用worklet个钩子，这只需在钩子及其回调的开头添加"worklet";个.

Run Gesture callback on JS个

  const pan = Gesture.Pan()
    .runOnJS(true)
    .onStart(() => {
      // some logic that can call JS hooks
    })
    .onChange(() => {
      // some logic that can call JS hooks
    })
    .onEnd(() => {
      // some logic that can call JS hooks
    });

Run Gesture callback on UI (-= += clampOutRange2zero())个

  const clampOutRange2zero = (value, min = null, max = null) => {
    "worklet";
    const shouldClamp =
      (typeof min === "number" && value < min) ||
      (typeof max === "number" && value > max);
    return shouldClamp ? 0 : value;
  };


  const pan = Gesture.Pan()
    .onStart(() => {
      isGestureActive.value = true;
    })
    .onChange((e) => {
      translateX.value += clampOutRange2zero(e.changeX, 0, 200);
      translateY.value += clampOutRange2zero(e.changeY, 0, 200);
    })
    .onEnd(() => {
      isGestureActive.value = false;
    });

Run Gesture callback on UI (= clamp())个

  const clamp = (value, min = null, max = null) => {
    "worklet";
    return typeof min === "number" && value < min
      ? min
      : typeof max === "number" && value > max
      ? max
      : value;
  };

  const pan = Gesture.Pan()
    .onStart(() => {
      isGestureActive.value = true;
    })
    .onChange((e) => {
      translateX.value = clamp(translateX.value + e.changeX, 0, 200);
      translateY.value = clamp(translateY.value + e.changeY, 0, 200);
    })
    .onEnd(() => {
      isGestureActive.value = false;
    });