达到限制后停止拖动答案

【问题标题】：stop dragging after a limit has reached达到限制后停止拖动
【发布时间】：2020-10-13 07:55:43
【问题描述】：

我正在使用 react 原生手势处理程序来创建一个可以上下滚动的栏。目前我可以随心所欲地滚动它。我想修改它，使其在达到一定限制时停止滚动。

export const SwipeablePanel: React.FunctionalComponent = () => {
  //set up animation variables
  const dragY = useRef(new Animated.Value(0));

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

  const onHandleStateChange = (event: any) => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
       dragY.current.extractOffset();
    }
    console.log('EVENT', event.nativeEvent)

  };
  const animateInterpolation = dragY.current.interpolate({
    inputRange: [-(SCREEN_HEIGHT * 2) / 3, 0],
    outputRange: [moderateScale(80) - (SCREEN_HEIGHT * 2) / 3, 0],
    extrapolate: 'clamp',
  });

  const animatedStyles = {
    transform: [
      {
        translateY: animateInterpolation,
      },
    ],
  };

  const whitelistBarMarginInterpolation = dragY.current.interpolate({
    inputRange: [-SCREEN_HEIGHT + SCREEN_HEIGHT / 3, 0],
    outputRange: [0, moderateScale(150)],
    extrapolate: 'clamp',
  });

  const whitelistBarStyles = {
    transform: [
      {
        translateY: whitelistBarMarginInterpolation,
      },
    ],
  };

  return (
    <PanGestureHandler
      onGestureEvent={onGestureEvent}
      onHandlerStateChange={onHandleStateChange}
      activeOffsetX={[-1000, 1000]}
      activeOffsetY={[-10, 10]}
      >
      <Animated.View
        style={[
          styles.container,
          animatedStyles
        ]}>
        <ScrollBar />
  );
};

在onHandleStateChange，我可以得到event.nativeEvent的值，比如

absoluteX: 237
absoluteY: 348.5
handlerTag: 109
numberOfPointers: 0
oldState: 4
state: 5
target: 5235
translationX: 7
translationY: 200.5
velocityX: 0
velocityY: 0
x: 237
y: 84.84616088867188

我想在代码中使用 if else 条件，这样我就可以设置滚动停止点之后的限制。但我不知道该怎么做，因为滚动发生在onGestureEvent。

我想在这里添加检查，但如果我像这样更改它，它就不再起作用了：

  const onGestureEvent = () => {
    Animated.event([{ nativeEvent: { translationY: dragY.current } }], {
      useNativeDriver: true,
    });
  };

小吃博览会：https://snack.expo.io/@nhammad/insane-pizza 我试图重现它，但在这里我无法滚动它。我在我的应用程序中使用相同的代码，它会滚动到那里。

【问题讨论】：

标签： javascript reactjs react-native react-animated react-native-gesture-handler

【解决方案1】：

试试 ScrollView，它有一个叫 scrollEnabled 的道具。借助此道具，当您不希望用户再滚动时，您可以将其设置为 false。为 false 时，无法通过触摸交互滚动视图。

这是文档：https://facebook.github.io/react-native/docs/scrollview.html#scrollenabled

ScrollView 也有 onScroll 所以这里的逻辑应该很容易实现。

【讨论】：

我正在使用样式动画组件，所以在这种情况下不想切换到 scrollView，但谢谢！