問題出現(xiàn)環(huán)境

React Native 安卓

問題描述

1、父ScrollView豎向滾動(dòng)，高度撐滿全屏，子ScrollView橫向滾動(dòng)，但子ScrollView區(qū)域內(nèi)橫豎向滑動(dòng)都無效（本以為是嵌套的問題，但其實(shí)屏幕靠右一部分區(qū)域是可以滑動(dòng)的。。。）代碼如下：

<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去掉，改為豎向滾動(dòng)，則一切正常。
3、在子ScrollView外套一層View，并加上一個(gè)absolute的Text（View不行）覆蓋在子ScrollView上，然后在這個(gè)absolute的Text上滑動(dòng)，可以正常觸發(fā)子ScrollView的橫向滾動(dòng)。。。代碼如下：

<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來說，并不支持內(nèi)部ScrollView進(jìn)行橫向滾動(dòng)，即使是安卓原生NestedScrollView也不支持horizontal
但我這個(gè)問題其實(shí)是手機(jī)屏幕左側(cè)部分，有一個(gè)手勢側(cè)滑返回上一頁的功能，這個(gè)側(cè)滑的區(qū)域跟ScrollView滑動(dòng)有沖突。

解決方法

1、react-navigation的Stack里option有一個(gè)gestureEnabled屬性，可以禁止頁面手勢返回，禁止后就沒有沖突了。
2、只想在指定區(qū)域禁止手勢返回的話，需要這樣：

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