reactnative FlatList 滑动后如何获取当前显示的data是哪一个？

Question

 var dataFlat = [{flg: 1}, {flg: 2}, {flg: 3}]
  
const renderContent = (item, index) => {return (
                               ...
                     )}

  <FlatList
    data={dataFlat}
    pagingEnabled={true}
    renderItem={({ item, index }) => renderContent(item, index)}
    keyExtractor={(item) => item.flg}
    horizontal={true}
    scrollEnabled
    showsHorizontalScrollIndicator={false}
    showsVerticalScrollIndicator={false}
  />

如何获取到当前显示的是第几页（第几个dataFlat），通过改变某个属性能控制组件 显示第几个data吗？

Answer 1

暂时使用计算滑动移动量判断当前页
scrollToIndex方法实现跳转
但是渲染数据优化不行，的有1s延迟，显然不太行。。

我这边是左右翻页，判断滑动的移动距离和视图宽度比较，滑动超过一半就判断翻到下一页。
如果变更页数在拖拽完成后的话，会有割裂感。

const  onScroll=(e)=>{
  let contentOffset = e.nativeEvent.contentOffset;
  let viewSize = e.nativeEvent.layoutMeasurement;
  let pageNum = Math.round(contentOffset.x / viewSize.width)
  setCurrentPage(pageNum + 1)
}

按下tab跳转
这里改变了一个onScroll方法是否执行的flg，在按下按钮时就onScroll就不执行

  const tabclick = (e) => {
    setOnscrollEnable(false)
    setCurrentPage(e)
    flatListRef.current.scrollToIndex({ index: e - 1 });
  let timer= setTimeout(() => {
    setOnscrollEnable(true)
    clearTimeout(timer)
    timer=null
   }, 1000); 
  }

组件

      <FlatList
        ref={flatListRef}
        data={dataFlat}
        pagingEnabled={true}
        renderItem={({ item, index }) => renderContent(item, index)}
        key={(item) => item.flg}
        horizontal={true}
        scrollEnabled
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        scrollEventThrottle={300}//设置300，一帧回调一次这个onScroll方法，但是没啥用
        onScroll={onscrollEnable?onScroll:''}
      />

如果数据很多的话，也可以用上滑加载更多的方法，性能会好很多