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

Question

React Native ScrollView 有一个 prop pagingEnabled 。但是，它假设 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（不再可用）

---

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

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

...

Answer 4

我是这样做的：

import React from 'react';
import {ScrollView} from 'react-native';
    
function handleInfinityScroll(event) {
   let mHeight = event.nativeEvent.layoutMeasurement.height;
   let cSize = event.nativeEvent.contentSize.height;
   let Y = event.nativeEvent.contentOffset.y;
   if (Math.ceil(mHeight + Y) >= cSize) return true;
   return false;
}
    
const HomeScreen= ({navigation}) => (
  <ScrollView
    onScroll={({event}) => {
      if (handleInfinityScroll(event)) {
        console.log("END");
      }
    }}
  >
    <></>
  </ScrollView>
);
    
export default HomeScreen;