时间戳

首页 > 解决方案 > Android 支持 React Native 的 onScroll、onScrollEndDrag、onScrollBeginDrag？

android - Android 支持 React Native 的 onScroll、onScrollEndDrag、onScrollBeginDrag？

问题描述

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

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

代码很简单：

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

标签： androidreactjsreact-nativeandroid-emulatorexpo

解决方案

是的，他们得到支持，但他们有问题......

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

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

我已经为项目backgroundColor的包装添加了一个透明<View />的，现在onScrollBeginDrag,onScrollEndDrag和onScroll的事件<FlatList />正在按预期触发！

<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 致敬。

推荐阅读