在Android上支持React Native的onScroll，onScrollEndDrag，onScrollBeginDrag? [英] React Native's onScroll, onScrollEndDrag, onScrollBeginDrag supported on Android?

问题描述

我在onScrollBeginDrag，onScroll和onScrollEndDrag中有一些简单的console.log语句附加到ScrollView.我可以看到它们在我的iOS设备上可以正常运行，但是在Android模拟器上却无法运行.

I have a few simple console.log statements in onScrollBeginDrag, onScroll, and onScrollEndDrag attached to a ScrollView. I can see that they work as expected on my iOS device, but they are not working on an Android emulator.

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

This raises the question, are these props only supported on iOS or is there a problem with Android emulator?

代码很简单:

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

推荐答案

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

Yes, they are supported, but they have issues...

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

I assume you use a <FlatList /> to render your components, correct?

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

If so, your issue is most probably caused by the <View /> containing your <FlatList /> items being optimized away by Android. Android automatically removes 'wrapping' views that do not actually render any content, such as a background color or borders. This optimization helps to reduce the depth of the view hierarchy but can cause unexpected results in some cases (such as this)...

我在包裹的<View />中添加了透明的backgroundColor，现在<FlatList />的onScrollBeginDrag，onScrollEndDrag和onScroll事件正在按预期触发！

I've added a transparent backgroundColor to the wrapping <View /> of the items and now the onScrollBeginDrag, onScrollEndDrag and onScroll events of the <FlatList /> are firing as expected!

<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填充，并在包装​​视图中添加了一些填充，这使可触摸区域更大.

I also removed the FlatList paddings and I added some paddings to the wrapping view, which makes the touchable area larger.

PS:对 Bartol Karuza 表示感谢..

PS: Kudos to Bartol Karuza.

这篇关于在Android上支持React Native的onScroll，onScrollEndDrag，onScrollBeginDrag?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！