RN-在滚动时滑动刷卡的动画平面列表卡住了

Question

我在查看带有平面列表的动画视图时遇到问题-

我有一个可滑动刷卡的纸牌叠，但您也可以在其上滚动。

我的滑动响应人仅针对水平滑动而打开，但是，如果滚动没有停止（由于动量滚动）而您尝试滑动它，则卡纸（参见gif）。

有人知道我该如何解决吗？

export default class Card extends Component {



  componentWillMount() {
    this.pan = new Animated.ValueXY()

    this.cardPanResponder = PanResponder.create({
      onMoveShouldSetPanResponder: (evt, gestureState) => 
      (Math.abs(gestureState.dx) > Math.abs(gestureState.dy)),

      
      onPanResponderMove:
      Animated.event([
        null,
        {dx:this.pan.x, 
        },
      ]),
      onPanResponderRelease: (e, {dx}) => {
        const absDx = Math.abs(dx)
        const direction = absDx / dx
        const swipedRight = direction > 0
        if (absDx > 120) {
          Animated.decay(this.pan, {
            velocity: {x:3 * direction, y:0},
            deceleration: 0.995,
          }).start(()=>this.props.onSwipeOff(swipedRight, this.props.profile.uid))
        } else {
          Animated.spring(this.pan, {
            toValue: {x:0, y:0},
            friction: 4.5,
          }).start()
        }
      },
    })
  }


  render() {
    
    const rotateCard = this.pan.x.interpolate({
      inputRange: [-200, 0, 200],
      outputRange: ['-4deg', '0deg', '4deg'],
    })
    const animatedStyle = {
      transform: [
        {translateX: this.pan.x},
        {rotate: rotateCard},
      ],
    }

    return (
      <Animated.View
        {...this.cardPanResponder.panHandlers}
        style={[animatedStyle]}>
        <View>
          <GridProfile>
        </View>
      </Animated.View>
    )
  }
}

其中GridProfile是具有平面列表的组件。

Answer 1

如果可以等到动量滚动完成，可以在GridProfile中使用FlatList的onScroll处理程序。

编辑：已更新为在滑动期间禁用滚动，并在滚动期间禁用滑动。 免责声明：未经测试的代码！ ;-）

GridProfile

这里您需要回调以确定滚动是否已完成（iframe { pointer-events: none; } ），以及在检测到滑动时禁用滚动的道具（disableSwipe）。

scrollEnabled

卡

卡组件将管理启用和禁用滑动/滚动的状态

render() {
  ...
  <FlatList
    scrollEventThrottle={50} // Might need to tweak this 
    onScroll={this.onScroll}
    scrollEnabled={this.props.scrollEnabled}
  />
  ...
}

onScroll = (event) => {

  // if y velocity of onScroll is zero, then scrolling is completed
  if (event.nativeEvent.velocity.y > 0) {
    this.props.setSwipeEnabled(false); 
  } else if (event.nativeEvent.velocity.y === 0) {
    this.props.setSwipeEnabled(true); 
  }
}