使用来自 react-native-gesture-handler 的 PanGestureHandler 时位置重置为 0

Question

import React, { useRef, useState, useCallback } from 'react';
import { View, Animated } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';


const InfoBox = ({ info }: Props) => {
  const [currenPos, setCurrentPos] = useState<number>(0);
  const translateY = useRef(new Animated.Value(0)).current;

  const onGestureEvent = useCallback(
    Animated.event(
      [
        {
          nativeEvent: {
            translationY: translateY,
          },
        },
      ],
      {
        useNativeDriver: true,
      },
    ),
    [],
  );

  const handleTransformStyle = {
    transform: [
      {
        translateY,
      },
      {
        translateX: -55,
      },
    ],
  };

  return (
    <View style={styles.container}>
      <PanGestureHandler
        onGestureEvent={onGestureEvent}
      >
        <Animated.View style={[styles.handleBar, handleTransformStyle]}>
          <View style={styles.separator} />
        </Animated.View>
      </PanGestureHandler>
    </View>
  );
};

export default InfoBox;

我提供了一个非常简单的例子PanGestureHandler。第一次移动盒子时，它会移动到一个位置并停留在该位置。但是，如果我再次尝试移动它，它会从位置 0 开始，而不是从我离开它的位置开始。

如有任何帮助，我们将不胜感激。

编辑

我意识到这是由于偏移量被重置而发生的。

Answer 1

我找到了解决这个问题的方法。

将onHandlerStateChange添加到PanGestureHandler:

 <PanGestureHandler
    onGestureEvent={onPanGestureEvent}
    onHandlerStateChange={onHandlerStateChange}
 >
...
</PanGestureHandler>

然后，创建一个 onHandlerStateChange 函数，如下所示：

  const onHandlerStateChange = useCallback(() => {
    translateY.extractOffset();
  }, []);

translateY.extractOffset(); 施展了魔法。它设置偏移值。呸！

使用来自 react-native-gesture-handler 的 PanGestureHandler 时位置重置为 0

Position resets to 0 while using PanGestureHandler from react-native-gesture-handler

javascript

animation

reactjs

react-native

react-native-gesture-handler