Android 支持 React Native 的 onScroll、onScrollEndDrag、onScrollBeginDrag？答案

【问题标题】：React Native's onScroll, onScrollEndDrag, onScrollBeginDrag supported on Android?Android 支持 React Native 的 onScroll、onScrollEndDrag、onScrollBeginDrag？
【发布时间】：2019-09-20 06:37:48
【问题描述】：

我在onScrollBeginDrag、onScroll 和onScrollEndDrag 中有一些简单的console.log 语句附加到ScrollView。我可以看到它们在我的 iOS 设备上按预期工作，但它们不能在 Android 模拟器上工作。

这就提出了一个问题，这些道具是否仅在 iOS 上支持，还是 Android 模拟器有问题？

代码很简单：

onScroll={() => console.log("scroll")}
onScrollBeginDrag={() => console.log("begin")}
onScrollEndDrag={() => console.log("end")}

【问题讨论】：

标签： android reactjs react-native android-emulator expo

【解决方案1】：

是的，它们受支持，但它们有问题...

我假设您使用 <FlatList /> 来渲染您的组件，对吗？

如果是这样，您的问题很可能是由包含您的<FlatList /> 项目的<View /> 被Android 优化掉 引起的。 Android 会自动删除实际上不呈现任何内容的“包装”视图，例如背景颜色或边框。这种优化有助于减少视图层次结构的深度，但在某些情况下可能会导致意外结果（例如这种情况）...

我已将透明的backgroundColor 添加到项目的包装<View />，现在<FlatList /> 的onScrollBeginDrag、onScrollEndDrag 和onScroll 事件按预期触发！

<FlatList
  onScrollBeginDrag={() => console.log('begin')}
  onScrollEndDrag={() => console.log('end')}
  onScroll={() => console.log('end')}
  data={[{key: 'a'}, {key: 'b'}]}

  renderItem={({ item }) => (
    <View style={{ backgroundColor: 'transparent' }}>
      <Text>{item.key}</Text>
    </View>
  )}
/>

我还删除了 FlatList 填充，并在环绕视图中添加了一些填充，这使得可触摸区域更大。

PS：向Bartol Karuza致敬。

【讨论】：

<ScrollView> 怎么样？我有同样的问题，我的（水平）滚动视图 onScrollBeginDrag 不会触发...？

【解决方案2】：

我在 FlatList 中使用 onScrollBeginDrag，react-native 0.59.9，正如你所说，它在 android 模拟器上不起作用（在 genymotion，android 7 上测试）。

不过，它确实可以在运行 android 8 的智能手机上工作，因此有一种使用方法...

【讨论】：