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道具以节省空间.该FlatList组件是基于VirtualizedList,所以该示例应该适合您.

Answer 2

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

并根据移动尺寸宽度和 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 /> }
/>