达到限制后停止拖动 [英] stop dragging after a limit has reached

问题描述

我正在使用react本机手势处理程序创建一个可以向上和向下滚动的栏.目前，我可以随意滚动它.我想对其进行修改，以使其在达到一定限制时停止滚动.

I am using react native gesture handlers to create a bar that can be scrolled up and down. Currently I can scroll it as much as I want. I want to modify it such that it should stop scrolling when I certain limit has reached.

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的值，例如

In onHandleStateChange, I can get values of event.nativeEvent such as

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发生的.

I want to use an if else condition in the code such that I can set limits after which point the scrolling stops. But I am not sure how to do that since the scrolling happens from the onGestureEvent.

我考虑过在这里添加支票，但是如果我这样更改它，它将不再起作用:

I thought of adding checks in here but if I change it like this, it no longer works:

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

零食博览会: https://snack.expo.io/@nhammad/insane-披萨 我试图重现它，但是在这里我不能滚动它.我在我的应用程序中使用了相同的代码，它会在那滚动.

Snack Expo : https://snack.expo.io/@nhammad/insane-pizza I tried to reproduce it but here I can't scroll at it. I am using the same code in my app and it scrolls over there.

推荐答案

尝试ScrollView，它具有称为scrollEnabled的属性.借助此道具，当您不希望用户再滚动时，可以将其设置为false.如果为false，则无法通过触摸交互来滚动视图.

Try ScrollView, It has prop called scrollEnabled. By help of this prop you can turn to false when you don't want user to be able to scroll any more. When false, the view cannot be scrolled via touch interaction.

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

ScrollView也具有onScroll，因此应该易于在此处实现逻辑.

ScrollView also has onScroll so it should be easy to implement the logic here.

这篇关于达到限制后停止拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！