2017-01-22 269 views
9

React Native ScrollView有一个道具pagingEnabled。但是,它假定ScrollView中每个页面(或子组件)的宽度等于ScrollView的宽度。在React Native ScrollView中检测滚动结束,管理页面

我们该如何修补它,使其对比ScrollView小的页面正常工作?

是否有可能检测到用户何时停止滚动?然后我们可以很容易地编写我们自己的代码来捕捉到正确的页面。

编辑:还有其他一些方法可以通过使用仅在iOS上可用的道具来修补此问题,所以这在Android中尤其明显。

回答

24

有两种不同的道具可以设置为React Native ScrollView,它会通过回调来通知滚动已结束。 (他们都没有,据我所知,API文档中列出,我不知道为什么。其中只有一个是目前记录在案。)


onScrollEndDrag功能

一旦用户放开ScrollView,就会调用(从屏幕上抬起手指)。

工作样品:https://rnplay.org/apps/Ufv6Cg


onMomentumScrollEnd function

当滚动型停止滑动时(它通常将继续滑动一点点用户已经从屏幕上解除了手指之后)调用。

工作样本:https://rnplay.org/apps/BPgG_g


注:我找不到任何的API文档的方法做出反应机组件,但作为例子表明,他们的工作。我看到他们在react-native-snap-carousel中使用here

+2

也想加上'onScrollBeginDrag'是另外一个,在拖动开始https://github.com/facebook/react-native/blob/62b20ce582383dd36c07b5d541cde6a7d13cabc6/React/Views/RCTScrollView.h#L54 – garrettmac

+3

触发奇怪足够onScrollEndDrag没有列出反应原生API,但仍然有效。 – tibbus

+0

您的示例链接都已损坏,它们也不在Wayback Machine中。 –

相关问题