Question

React Native separate extension page有一个道具ScrollView。但是，它假定ScrollView中每个页面（或子组件）的宽度等于ScrollView的宽度。

我们如何修改它以使其适用于小于ScrollView的页面？

是否可以检测用户何时停止滚动？然后我们可以轻松编写自己的代码以捕捉到正确的页面。

编辑：还有一些方法可以通过使用仅在iOS上提供的道具来修复此问题，因此这在Android上尤其成问题。

Answer 1

有两种不同的道具可以设置为React Native ScrollView，它采用回调来通知滚动已经结束。（他们现在都有记录。）

onScrollEndDrag function

用户放开ScrollView后立即调用（从屏幕上抬起手指）。

~~工作样本：https://rnplay.org/apps/Ufv6Cg~~ （不再可用）

onMomentumScrollEnd function

当ScrollView停止滑动时调用（在用户将手指从屏幕上抬起后，它通常会继续滑动一点）。

~~工作样本：https://rnplay.org/apps/BPgG_g~~ （不再可用）

注意：我找不到任何React Native组件的API文档中的方法，但它们的工作原理如示例所示。我在here中看到它们使用了react-native-snap-carousel。

Answer 2

另一种选择是使用 snapToOffsets 属性，它完全符合您的要求。

<块引用>

这可用于对长度小于滚动视图的各种大小的子项进行分页。

Answer 3

作为一种选择，您可以使用debounce package。并且不要忘记clear()。

import { debounce } from 'debounce';

...

const listenerDebounce = debounce((_) => {
    // Scroll Did End
  }, 160);

return <FlatList
  {...yourProps}
  onScroll={Animated.event(
    [{
        nativeEvent: {
            contentOffset: { y: scrollOffsetValue }
        }
    }],
    {
        useNativeDriver: true,
        listener: listenerDebounce
    },
)
/>;

...

在React Native ScrollView中检测滚动结束，对齐页面

3 个答案: