问题出现环境
React Native 安卓
问题描述
1、父ScrollView竖向滚动，高度撑满全屏，子ScrollView横向滚动，但子ScrollView区域内横竖向滑动都无效（本以为是嵌套的问题，但其实屏幕靠右一部分区域是可以滑动的。。。）代码如下：
<ScrollView style={{flex: 1}}>
<ScrollView style={{width: 300, height: 160}} horizontal={true} nestedScrollEnabled={true}>
<View style={{height: 150, width: 100, backgroundColor: 'red'}}></View>
<View style={{height: 150, width: 100, backgroundColor: 'yellow'}}></View>
<View style={{height: 150, width: 100, backgroundColor: 'blue'}}></View>
<View style={{height: 150, width: 100, backgroundColor: 'red'}}></View>
<View style={{height: 150, width: 100, backgroundColor: 'yellow'}}></View>
<View style={{height: 150, width: 100, backgroundColor: 'blue'}}></View>
</ScrollView>
</ScrollView>
2、将horizontal去掉，改为竖向滚动，则一切正常。
3、在子ScrollView外套一层View，并加上一个absolute的Text（View不行）覆盖在子ScrollView上，然后在这个absolute的Text上滑动，可以正常触发子ScrollView的横向滚动。。。代码如下：
<ScrollView style={{flex: 1}}>
<View style={{flex: 1}}>
<Text style={{position: 'absolute', zIndex: 1, width: '100%', height: '50%', left: 0, top: 0, backgroundColor: 'gray'}}></Text>
<ScrollView style={{width: 300, height: 160}} horizontal={true} nestedScrollEnabled={true}>
<View style={{height: 150, width: 100, backgroundColor: 'red'}}></View>
<View style={{height: 150, width: 100, backgroundColor: 'yellow'}}></View>
<View style={{height: 150, width: 100, backgroundColor: 'blue'}}></View>
<View style={{height: 150, width: 100, backgroundColor: 'red'}}></View>
<View style={{height: 150, width: 100, backgroundColor: 'yellow'}}></View>
<View style={{height: 150, width: 100, backgroundColor: 'blue'}}></View>
</ScrollView>
</View>
</ScrollView>
参考
https://stackoverflow.com/questions/37455701/react-native-nested-scrollview-cant-scroll-on-android-device
说的是：对于安卓的嵌套ScrollView来说，并不支持内部ScrollView进行横向滚动，即使是安卓原生NestedScrollView也不支持horizontal
但我这个问题其实是手机屏幕左侧部分，有一个手势侧滑返回上一页的功能，这个侧滑的区域跟ScrollView滑动有冲突。
解决方法
1、react-navigation的Stack里option有一个gestureEnabled属性，可以禁止页面手势返回，禁止后就没有冲突了。
2、只想在指定区域禁止手势返回的话，需要这样：
...
<ScrollView horizontal onTouchStart={() => {
this.props.navigation && this.props.navigation.setOptions({
gestureEnabled: false
})
}} onTouchEnd={() => {
this.props.navigation && this.props.navigation.setOptions({
gestureEnabled: true
})
}} onTouchMove={() => {
this.props.navigation && this.props.navigation.setOptions({
gestureEnabled: true
})
}}>
</ScrollView>
...
