1

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

我查看了 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>

所以有谁知道我可以解决这个问题吗？

4

0 回答 0