关于安卓ScrollView(横向)嵌套ScrollView(横向)冲突问题

nestedScrollEnabled prop not working in ScrollView (Android) with horizontal direction

背景:react-native开发中,使用到了ScrollView(横向)嵌套ScrollView(横向),测试发现ios滑动是正常的,但是安卓手机子层的ScrollView滑动是失效的,以下是我尝试的几种解决方案:

方案一:

引用react-native-gesture-handler

import { ScrollView } from 'react-native'
import { ScrollView as GestureHandlerScrollView } from 'react-native-gesture-handler'

<ScrollView horizontal>
    <GestureHandlerScrollView horizontal />
</ScrollVIew>

注意: 经本人实践,这个方法可以解决这个问题。但是会有部分安卓机(华为、小米)不支持,生产会报错,100w的下载量会影响20个用户左右,最终pass掉了这个方案。

方案二:

加上nestedScrollEnabled属性

<ScrollView horizontal nestedScrollEnabled={true}>
    <ScrollView horizontal nestedScrollEnabled={true}>
    </ScrollVIew>
</ScrollVIew>

注意: 这个属性仅仅子在 Android API level 21(5.0)以上才有效,我们用户体量较大,最终也pass掉了这个方案

方案三:

当点击内层scrollview时,禁用外层scrollview的滚动,点击外层时启用

   handleEnableScroll = () => {
      this.ScrollViewScroll.setNativeProps({ scrollEnabled: true })
  }
  handleDisableScroll = () => {
      this.ScrollViewScroll.setNativeProps({ scrollEnabled: false })
    }
...
      <View style={{ flex: 1 }} onStartShouldSetResponderCapture={()  => Platform.OS === 'android' && this.handleEnableScroll()}>
        <ScrollView
          ref={ref => {
            this.ScrollViewScroll = ref
          }}
        >
          <View onStartShouldSetResponderCapture={() => Platform.OS === 'android' &&  this.handleDisableScroll()}>
            <ScrollView />
          </View>
        </ScrollView>
      </View>  

注意: scrollview是否禁止滚动需要用setNativeprops来直接对底层view进行改动,不能用setState的方式,异步渲染的方式会让状态改变无法及时响应,造成卡顿,不灵敏。这也是我最后采用的方案!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值