bounty将在4天后过期。回答此问题可获得+50的声望奖励。Shamoon正在寻找来自知名来源的答案。
我正在尝试使用onViewableItemsChanged事件来检测当前显示在屏幕上的平面列表项目。
在我的ViewabilityConfig(代码如下所示)中,我将 itemVisiblePercentThreshold 参数设置为100,我认为这将要求我的项目完全显示才能被视为 * 可查看 *。
如以下屏幕截图所示:Screenshot of my App
很明显,最上面的项没有完全显示在屏幕上(这应该使可见项只包含3个项)。但是,当我在onViewableItemsChanged事件处理程序中打印数组的长度时,它返回4(当我检查值时,包括最上面的项)。
Log Result of Viewable Items Array Length
这是FlatListonViewableItemsChanged事件的问题吗?还是我实现的不正确?
我试图从文档和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
};
1条答案
按热度按时间icomxhvb1#
您遇到的问题是由于误解了
ViewabilityConfig
中的itemVisiblePercentThreshold
参数。此参数定义了项目在屏幕上可见的最小数量,而不是最大数量。例如,如果将
itemVisiblePercentThreshold
设置为50,这意味着至少50%的项目需要在屏幕上可见才能被视为可查看。如果将其设置为100,这意味着至少100%的项目需要在屏幕上可见(即整个项目)才能被视为可查看。在您的示例中,您将
itemVisiblePercentThreshold
设置为100,这意味着至少要100%的项目在屏幕上可见才能被视为可查看。但是,正如您在屏幕截图中所看到的,最上面的项目在屏幕上并不是完全可见的,因此根据配置,它不应被视为可查看的。要解决此问题,需要将
itemVisiblePercentThreshold
参数调整为一个值,该值准确反映项目在屏幕上可见的数量。例如,如果您希望项目仅在屏幕上完全可见时才被视为可查看,您可以将itemVisiblePercentThreshold
设置为100。如果您希望即使在屏幕上只能看到项目的一半时也可以查看该项目,则可以将itemVisiblePercentThreshold
设置为50。以下是示范如何调整itemVisiblePercentThreshold参数的范例程式码片段:
通过调整
itemVisiblePercentThreshold
参数,可以确保onViewableItemsChanged
事件仅返回根据所需条件在屏幕上实际可见的项目。