React Native PanResponder-滚动视图效果/模仿

时间:2020-09-22 07:37:46

标签: react-native animation react-native-scrollview

我想使用PanResponder创建滚动效果(在我的特定情况下无法使用Scrollview)。如果我衰减并尝试使onPanResponderRelease上的动画平滑,则动画开始闪烁,因为在onPanResponderGrant中设置的偏移未考虑当前正在运行的平滑动画。有些人可以解决这个问题?

 const panResponder = React.useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: (evt, gestureState) => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value,
        });
      },
      onPanResponderMove: (evt, gestureState) =>
        Animated.event([null, {dx: pan.x, dy: pan.y}], {
          useNativeDriver: false,
        }),
      onPanResponderRelease: (evt, {vx, vy}) => {
        pan.flattenOffset();
        let velocity;

        if (vx >= 0) {
          velocity = clamp(vx, 0, 5);
        } else if (vx < 0) {
          velocity = clamp(vx * -1, 0, 5) * -1;
        }

        Animated.decay(pan, {
          velocity: {x: velocity, y: vy},
          deceleration: 0.99,
          useNativeDriver: false,
        }).start();
      },
    }),
  ).current;

0 个答案:

没有答案