我正在尝试使用 onViewableItemsChanged 事件来检测FlatList当前显示在屏幕上的项目。
在ViewabilityConfig中(下面提供了代码),我将 itemVisiblePercentThreshold 参数设置为100,我认为这将要求我的物品被完全显示为 viewable 。但是,对我而言并非如此。
如以下屏幕快照所示: Screenshot of my App
很明显,最上面的项目没有完全显示在屏幕上(应该使可见的项目仅包含3个项目)。但是,当我在 onViewableItemsChanged 事件处理程序中打印数组的长度时,它返回4(并且当我检查值(包括最上面的项)时)。
Log Result of Viewable Items Array Length
这是FlatList onViewableItemsChanged 事件的问题吗?还是我实施不正确?
我试图从文档和React-native github中找到解决方案,但是没有关于此事件如何工作的进一步解释。
我的代码的一些相关片段如下:
平面列表定义
<FlatList
viewabilityConfig={this.clippingListViewabilityConfig}
inverted={true}
horizontal={false}
data = {this.props.clippingResultArray}
ref={(ref) => this.clippingResultFlatList = ref}
style={{
// flexGrow:0,
// backgroundColor: 'green',
// width:'100%',
// width: Dimensions.get('window').width,
}}
contentContainerStyle={{
// justifyContent:'flex-end',
// flexGrow:0,
// flexDirection:'row',
// alignItems:'flex-end',
}}
renderItem={this.renderClippingListItemRight}
keyExtractor={(item, index) => index.toString()}
onViewableItemsChanged={this.onClippingListViewableChanged}
// removeClippedSubviews={true}
{...this._clippingListItemPanResponder.panHandlers}
/>
onViewableItemsChanged侦听器
onClippingListViewableChanged = (info) => {
console.log("***************************NUMBER OF CURRENT VIEWABLE ITEMS:",info.viewableItems.length);
console.log("Item list:",info.viewableItems);
this.setState({
...this.state,
viewableItems: info.viewableItems,
});
};
可见配置
this.clippingListViewabilityConfig = {
waitForInteraction: false,
itemVisiblePercentThreshold: 100,
minimumViewTime: 500, //In milliseconds
};