Дочерний ScrollView перехватывает PanResponder у родителя

Я работаю над компонентом вкладки в React-Native прямо сейчас. Так что у меня есть View с PanResponder в качестве родителя, который обрабатывает горизонтальные жесты. Однако когда я добавляю ScrollView в качестве дочернего элемента к этому представлению, ScrollView иногда перехватывает горизонтальные жесты и становится ответчиком. Поэтому, когда я проводлю пальцем вправо или влево, он становится ответчиком в середине жеста, даже если я не проводлю вертикально, и PanResponder возвращает false onTerminationRequest [Я знаю, что это не гарантирует отклонение запроса на завершение].

Я посмотрел другие вопросы и проблемы на странице 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>

Так кто-нибудь знает, могу ли я решить эту проблему?

0 ответов

Другие вопросы по тегам