React Native中Animated.ScrollView的onScroll iOS正常Android不触发问题

问题根因 #

iOS的ScrollView默认开启弹性滚动（bounce效果），在内容顶部下拉时会产生负的contentOffset.y，触发onScroll回调。但Android端默认关闭弹性滚动，且内容小于容器高度/滚动到顶部时下拉不会产生滚动偏移，因此不会触发onScroll事件。

解决方案 #

给你的Animated.ScrollView添加3个属性，强制开启Android端的弹性滚动和溢出滚动回调：

<Animated.ScrollView
  ref={scrollRef}
  style={[styles.bottomSheetContainer, actionSheetBottomStyle]}
  scrollEventThrottle={12}
  showsVerticalScrollIndicator={false}
  // 新增以下3个属性
  bounces={true}
  overScrollMode="always"
  alwaysBounceVertical={true}
  onScroll={(e) => gestureHandler(e)}
>

属性说明：

• bounces={true}：强制开启弹性滚动效果，Android默认值为false，iOS默认值为true
• overScrollMode="always"：Android特有属性，允许滚动到边界时继续产生溢出滚动效果，默认值为auto（内容不足时不会触发溢出滚动）
• alwaysBounceVertical={true}：即使ScrollView内容高度小于容器高度，也允许垂直方向的弹性滚动

兼容备选方案 #

如果你使用的React Native版本对Android溢出滚动的onScroll回调支持不稳定，可以改用PanResponder绑定顶部的指示器/关闭按钮区域的拖拽手势来判断下拉距离，兼容性更好，无需依赖ScrollView的滚动事件。

内容的提问来源于stack exchange，提问作者Jscripter