0

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

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 我试图复制它，但在这里我无法滚动它。我在我的应用程序中使用相同的代码，它会滚动到那里。

4

1 回答 1

0

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

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

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

于 2020-10-13T08:01:32.860 回答