Javascript 使用react native手势处理程序中的PanGestureHandler时，位置重置为0 import React，{useRef，useState，useCallback}来自'React'； 从“react native”导入{View，Animated}； 从“react native手势处理程序”导入{PanGestureHandler}； 常量信息框=（{info}:Props）=>{ const[currenPos，setCurrentPos]=useState（0）； const translateY=useRef（新的动画.Value（0））.current； const onGestureEvent=useCallback( 活动( [ { nativeEvent：{ translationY:translateY， }, }, ], { useNativeDriver：没错， }, ), [], ); 常量HandletTransferMstyle={ 转换：[ { 特兰西， }, { translateX:-55， }, ], }; 返回( ); }; 导出默认信息框；

我提供了一个非常简单的

PanGestureHandler

示例。第一次移动长方体时，它会移动到某个位置并保持在该位置。但是，如果我再次尝试移动它，它将从位置0开始，而不是从我离开它的位置开始

任何帮助都将不胜感激

编辑

---

我意识到这是由于偏移量被重置造成的。

我找到了解决此问题的方法

将

onHandlerStateChange

添加到

PanGestureHandler

：

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;

---

translateY.extractOffset（）执行了魔法。它设置偏移值。呸
 我找到了解决这个问题的办法

将
onHandlerStateChange
添加到
PanGestureHandler
：

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;

translateY.extractOffset（）执行了魔法。它设置偏移值。呸
 是否可以在OnTestureFunction中添加某种检查？或者我们只能直接使用事件？请看这个嗨，我和PinchGestureHandler有同样的问题。但我尝试使用scale.extractOffset（）或scale.flattOffset等函数，没有任何影响。您对这个问题有什么建议吗？不幸的是，文档非常混乱。您可能需要真正实施、测试并尝试找到解决方案。这就是我必须要做的。是否可以在OnGetureFunction中添加一些检查？或者我们只能直接使用事件？请看这个嗨，我和PinchGestureHandler有同样的问题。但我尝试使用scale.extractOffset（）或scale.flattOffset等函数，没有任何影响。您对这个问题有什么建议吗？不幸的是，文档非常混乱。您可能需要真正实施、测试并尝试找到解决方案。这就是我必须做的
  const onHandlerStateChange = useCallback(() => {
    translateY.extractOffset();
  }, []);