Question

我正在研究React-Native中的标签组件。所以我有一个带有PanResponder的View作为处理水平手势的父级。但是，当我将ScrollView作为子视图添加到该视图时，ScrollView有时会截取水平手势并成为响应者。因此，当我向右或向左滑动时，即使我没有垂直滑动而且PanResponder在onTerminationRequest上返回false，它也会成为手势中间的响应者[我知道这不能保证终止请求被拒绝]。

我在GitHub页面上查看了其他问题和问题，但似乎每个人都与PanResponder拦截ScrollView的问题完全相反。

这是泛响应者：

this.panResponder = PanResponder.create({
  // Ask to be the responder:
  onStartShouldSetPanResponder: (evt, gestureState) => true,
  onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

  onPanResponderGrant: (evt, gestureState) => {},
  onPanResponderMove: (evt, gestureState) => {
    if(this.state.checkScroll && this.state.checkScroll && Math.abs(gestureState.dx) > Math.abs(gestureState.dy)){
     if(gestureState.dx > 0 && this.state.current != 0)
        this.setState({current: this.state.current, next: this.state.current - 1, scroll: gestureState.dx, checkScroll: true, animating: false});
      else if(gestureState.dx < 0 && this.state.current != this.props.children.length -1)
        this.setState({current: this.state.current, next: this.state.current + 1, scroll: gestureState.dx, checkScroll: true, animating: false});
    }
  },
  onPanResponderTerminationRequest: (evt, gestureState) => false,
  onPanResponderRelease: (evt, gestureState) => {
    if(!Math.abs(gestureState.dx) > Math.abs(gestureState.dy) || !this.state.checkScroll){
      return;
    }
    if(gestureState.vx > 1 && gestureState.dx > 0)
      this.switchTo(this.state.current - 1);
    else if(gestureState.vx < -1 && gestureState.dx < 0)
      this.switchTo(this.state.current + 1);
    else if(Math.abs(gestureState.dx) > this.width / 2)
      this.switchTo(this.state.current - Math.sign(gestureState.dx));
    else
      this.abortSwipe();
  },
  onPanResponderTerminate: (evt, gestureState) => {
    if(!Math.abs(gestureState.dx) > Math.abs(gestureState.dy) || !this.state.checkScroll)
      return;
    if(gestureState.vx > 1 && gestureState.dx > 0)
      this.switchTo(this.state.current - 1);
    else if(gestureState.vx < -1 && gestureState.dx < 0)
      this.switchTo(this.state.current + 1);
    else if(Math.abs(gestureState.dx) > this.width / 2)
      this.switchTo(this.state.current - Math.sign(gestureState.dx));
    else
      this.abortSwipe();
  },
  onShouldBlockNativeResponder: (evt, gestureState) => {
    return true;
  },
});

这是相应的渲染部分：

    <View style={styles.tabBodyContainer} {...this.panResponder.panHandlers}>
      {this.props.children.map((child, index)=>{
        if(index == main.state.current){
          return <Animated.View key={index}  style={[styles.tabBodyView, {left: main.state.animating ? firstSeed : main.state.scroll}]}>{child}</Animated.View>;
        }
        else if(index == main.state.next){
          if(index < main.state.current)
            return <Animated.View key={index} style={[styles.tabBodyView, {right: main.state.animating ? secondSeed : (main.width - main.state.scroll)}]}>{child}</Animated.View>;
          else
            return <Animated.View key={index} style={[styles.tabBodyView, {left: main.state.animating ? secondSeed : (main.state.scroll + main.width)}]}>{child}</Animated.View>;
        }
        else
          return;
      })}
    </View>

所以任何人都知道我可以解决这个问题吗？

子ScrollView在Parent处拦截PanResponder

0 个答案: