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的方式,异步渲染的方式会让状态改变无法及时响应,造成卡顿,不灵敏。这也是我最后采用的方案!