React Native中FlatList实时获取当前Item索引

最新推荐文章于 2024-07-26 16:51:06 发布

孙先森i

最新推荐文章于 2024-07-26 16:51:06 发布

阅读量5k

点赞数 2

分类专栏： React-Native开发记录文章标签： ReactNative FlatList

本文链接：https://blog.csdn.net/qq_38356174/article/details/99745076

版权

React-Native开发记录专栏收录该内容

13 篇文章 1 订阅

订阅专栏

困扰两个星期的问题，在这里记录一下：

首先提一下FlatList的坑，目前使用的0.59.9版本 onViewableItemsChanged方法在多次取viewableItems中index的时候会出现不准确的情况，我的Item是一个占一屏并且设置了pagingEnabled在这种情况下，我采用了onMomentumScrollEnd方法去获取滑动的距离，以及测量item的高度去计算出当前Item是第几个，最后setState

代码如下：

<FlatList
	 ...
     onMomentumScrollEnd={this._onScrollEnd}
 />

 _onScrollEnd(e) {
        let contentOffset = e.nativeEvent.contentOffset;
        let viewSize = e.nativeEvent.layoutMeasurement;
        //如果横向滑动则是
        // Math.floor(contentOffset.x/viewSize.width);
        let pageNum = Math.floor(contentOffset.y/viewSize.height);
        console.log('scrolled to page ', pageNum);
    }