问题出现环境

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>
...