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节省空间的 Prop 。 FlatList组件构建于 VirtualizedList ，所以这个例子应该适合你。