Android 支持 React Native 的 onScroll、onScrollEndDrag、onScrollBeginDrag?

问题描述

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.

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

the code is as simple as:

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

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

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

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)...

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>
  )}
/>

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

PS: Kudos to Bartol Karuza.

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