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

Question

我有一个滚动视图，其中包含 children（Web 视图 - 可垂直滚动）的列表。当我尝试垂直滚动 Webview 时，parent - 水平方向出现偏转或小幅移动。我尝试将消息从 children 传递到 parent 以禁用或启用滚动，这很慢而且不是 100% 完美。有什么方法可以通过 react-native-scrollview 中的道具实现 android.

谢谢你。

Answer 1

我使用 PanResponder 的 react-native 找到了我的查询的答案。

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";
  }
}

参考 post.

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

Make scroll only if the finger movement is greater than 20% of screen

react-native

react-native-android