react-native - PanGestureHandler 与功能组件反应原生

Question

我正在尝试使用带有功能组件的手势处理程序。问题是当我第二次拖动时，它再次从初始位置拖动

这是我下面的代码

let translateXRef = useRef(new Animated.Value(0)).current;

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

<View
    style={{
      backgroundColor: '#FFFFFF80',
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      height: 100,
    }}
  >
    <PanGestureHandler
      onGestureEvent={onGestureEvent}
      onHandlerStateChange={onHandlerStateChange}
    >
      <Animated.View
        // eslint-disable-next-line react-native/no-inline-styles
        style={{
          height: '100%',
          width: 10,
          backgroundColor: AppColors.buttonColor,
          transform: [{ translateX: translateXRef }],
        }}
      />
    </PanGestureHandler>
  </View>