天天看点

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

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

首先提一下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);
    }