React-Native：使用 pagingEnabled 时获取 FlatList 中的当前页面

Posted 2023-02-16

【中文标题】React-Native：使用 pagingEnabled 时获取 FlatList 中的当前页面

【英文标题】：React-Native: Get current page in FlatList when using pagingEnabled

【发布时间】：2017-09-08 07:25:24

【问题描述】：

我有一个如下所示的 FlastList：

<FlatList
     pagingEnabled=true
     horizontal=true
     showsHorizontalScrollIndicator=false
     data=[ key:"A", key:"B" ]
     renderItem= (item, index) => <MyComponent /> 
 />

我设置了组件的宽度，因此一次只能在屏幕上显示一页。如何确定当前页面是什么（或者，当前正在显示的组件）？

【问题讨论】：

我有一个问题。 pagingEnabled 来自哪里？我不认为它是 API 的一部分。

@NaderDabit 这是一个很好的问题。它不在文档中，但它可以正常工作（至少现在是这样）。我最初有一个 ScrollView，它有 pagingEnabled，当我转换到 FlatList 时，它一直在工作。即使查看 React Native 代码，我也不能完全理解它为什么会起作用。我假设道具正在传递给底层的 ScrollView，但我无法确定发生在哪里。

啊，我看到它作为道具传递给了底层的滚动视图。很酷，每天都学点新东西！ github.com/facebook/react-native/blob/master/Libraries/…

是的，你可以在这里看到这一行：github.com/facebook/react-native/blob/master/Libraries/Lists/…

【参考方案1】：

我用VirtualizedList 构建了一个组件，就像你的一样，启用了分页。我使用 ScrollView 的 onMomentumScrollEnd 处理程序根据 contentOffset 确定当前页面。当用户在页面之间滑动后滚动动画停止时调用onMomentumScrollEnd 处理程序。它有一个类似于标准onScroll 事件的事件对象。您可以使用nativeEvent.contentOffset.x 来确定您所在的页面，如下所示：

class Example extends React.Component 

  onScrollEnd(e) 
    let contentOffset = e.nativeEvent.contentOffset;
    let viewSize = e.nativeEvent.layoutMeasurement;

    // Divide the horizontal offset by the width of the view to see which page is visible
    let pageNum = Math.floor(contentOffset.x / viewSize.width);
    console.log('scrolled to page ', pageNum);
  

  render() 
    return 
      <VirtualizedList 
        horizontal
        pagingEnabled
        onMomentumScrollEnd=this.onScrollEnd />
  

我留下了其他 VirtualizedList 道具以节省空间。 FlatList 组件是基于 VirtualizedList 构建的，因此该示例应该适合您。

【讨论】：

文档中的onMomentumScrollEnd 在哪里？我似乎在VirtualizedList 中找不到它。它是第三方库的一部分吗？

没关系，我在代码中找到了。文档的不完整真的令人沮丧。您的解决方案效果很好！我也能够继续使用 FlatList。

是的，ScrollView 事件处理程序并没有像它们可能的那样被记录。

你太棒了。我找不到任何与此相关的文档。你拯救了我的一天。非常感谢。

用 Math.round 代替 Math.floor 会更好

【参考方案2】：

您可以使用 Flatlist 的 onMomentumScrollEnd 来检测页面更改事件。

并根据移动维度_width 和 listItem 大小，使用以下公式计算 pageNumber。

let onScrollEnd = (e) => 
    let pageNumber = Math.min(Math.max(Math.floor(e.nativeEvent.contentOffset.x / dimensions_width + 0.5) + 1, 0), listItems.length);
    console.log(pageNumber); 


<FlatList
 pagingEnabled
 horizontal
 onMomentumScrollEnd=onScrollEnd
 data=listItems
 renderItem= (item, index) => <MyComponent /> 
/>