仅当手指移动超过屏幕的20%时才进行滚动

Question

我有一个滚动视图，其中包含子项的列表(Webview-垂直滚动)。当我尝试垂直滚动Webview时，出现偏转或在父级水平方向上的小移动。我试着将消息从子进程传递给父进程，以禁用或启用滚动，这很慢，也不是100%完美。有没有办法通过react-native-scrollview for android中的道具来实现这一点？

谢谢你。

Answer 1

我通过使用react-native的PanResponder找到了我的问题的答案。

componentWillMount() {
  this._panResponder = PanResponder.create({
    onMoveShouldSetPanResponder: (evt, gestureState) => {
      return Math.abs(gestureState.dx) > minDragWidth;
    },
    onPanResponderMove: (evt, gestureState) => {
      if(!this._swipeDirection) this.checkSwipeDirection(gestureState);
    },
    onPanResponderRelease: (evt, gestureState) => {
      this._swipeDirection = null;
    },
  });
}

因此，当启动触摸事件和继续拖动时，将分别调用这些函数。

通过检查滚动是水平的还是垂直的，我们可以执行相应的操作。

checkSwipeDirection(gestureState) {
  const isHorizontalSwipe = (Math.abs(gestureState.dx) > Math.abs(gestureState.dy * 3)) && 
  (Math.abs(gestureState.vx) > Math.abs(gestureState.vy * 3));

  if(isHorizontalSwipe) {
      this._swipeDirection = "horizontal";
      let index = (gestureState.dx > 0) ? this.state.paginationIndex - 1 : 
this.state.paginationIndex + 1;
      index = (index > 0) ? (index > (this.props.data.length - 1) ? (index - 1) : index) : 0;
      this._scrollToIndex(index, true);
      this.props.doRequiredAction({ index });
  } else {
      this._swipeDirection = "vertical";
  }
}

参考this post。