javascript - 为什么我的 PanResponder 没有读取更新状态？

Question

这是我的代码：

const processPinch = (x1: number, y1: number, x2: number, y2: number) => {
    function calcDistance(x1: number, y1: number, x2: number, y2: number) {
      const dx = x1 - x2;
      const dy = y1 - y2;
      return Math.sqrt(dx * dx + dy * dy);
    }

    function calcCenter(x1: number, y1: number, x2: number, y2: number) {
      function middle(p1: number, p2: number) {
        return (p1 + p2) / 2;
      }
      return {
        x: middle(x1, x2),
        y: middle(y1, y2),
      };
    }

    const distance = calcDistance(x1, y1, x2, y2);
    const {x, y} = calcCenter(x1, y1, x2, y2);

    if (!isZooming) {
      console.log('if1');
      setIsZooming(true);
      setInitialX(x);
      setInitialY(y);
      setInitialTop(top);
      setInitialLeft(left);
      setInitialZoom(zoom);
      setInitialDistance(distance);
    } else {
      console.log('if2');
      const touchZoom = distance / initialDistance;
      const dx = x - initialX;
      const dy = y - initialY;

      const left = (initialLeft + dx - x) * touchZoom + x;
      const top = (initialTop + dy - y) * touchZoom + y;
      const zoom = initialZoom * touchZoom;

      const nextState = {
        zoom,
        left,
        top,
      };

      const result = constrainExtent({
        zoom,
        left,
        top,
      });
    }
  };
  const panResponder = React.useRef(
    PanResponder.create({
      onPanResponderGrant: (evt, gestureState) => {
        // The gesture has started. Show visual feedback so the user knows
        // what is happening!
        // gestureState.d{x,y} will be set to zero now
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // Another component has become the responder, so this gesture
        // should be cancelled
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns whether this component should block native components from becoming the JS
        // responder. Returns true by default. Is currently only supported on android.
        return true;
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: shouldRespond,
      onStartShouldSetPanResponder: shouldRespond,
      onMoveShouldSetPanResponderCapture: shouldRespond,
      onStartShouldSetPanResponderCapture: shouldRespond,
      onPanResponderMove: ({nativeEvent: {touches}, preventDefault}) => {
        const {length} = touches;
        if (length === 1) {
          // console.log('if1');
          // const [{pageX, pageY}] = touches;
          // processTouch(pageX, pageY);
        } else if (length === 2) {
          const [touch1, touch2] = touches;
          processPinch(touch1.pageX, touch1.pageY, touch2.pageX, touch2.pageY);
        } else {
          return;
        }
        // if (preventDefault) preventDefault();
      },
      onPanResponderRelease: () => {
        setIsZooming(false);
        setIsMoving(false);
      },
    }),
  ).current;

我正在处理processPinch函数，但它没有继续执行 else 子句？我在考虑第一次运行时，它应该setZooming是真的：

if (!isZooming) {
      console.log('if1');
      setIsZooming(true);

但processPinch总是以如果？你在第一次运行时看到用户捏isZooming是假的，在第二次运行时等等，isZooming应该是真的，但它总是假的？

我在想这是因为useRef和.current？这是我在文档上看到的，所以我就是这样做的，我怎样才能使它与useRef+一起工作.current？

标签： javascriptreactjs