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

Question

我有一个 FlastList，如下所示：

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

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

Answer 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 个道具来保存 space。 FlatList 组件基于 VirtualizedList 构建，因此该示例应该适合您。

Answer 2

可以使用Flatlist的onMomentumScrollEnd来检测换页事件。

并根据移动设备 dimensions_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 /> }
/>

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

React-Native: Get current page in FlatList when using pagingEnabled

react-native

react-native-flatlist