Дочерний 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>
Так кто-нибудь знает, могу ли я решить эту проблему?