在ViewableItemsChanged上React Native平面列表返回不正确的项集

new9mtju  于 2022-12-04  发布在  React
关注(0)|答案(1)|浏览(248)

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
    };
icomxhvb

icomxhvb1#

您遇到的问题是由于误解了ViewabilityConfig中的itemVisiblePercentThreshold参数。此参数定义了项目在屏幕上可见的最小数量,而不是最大数量。
例如,如果将itemVisiblePercentThreshold设置为50,这意味着至少50%的项目需要在屏幕上可见才能被视为可查看。如果将其设置为100,这意味着至少100%的项目需要在屏幕上可见(即整个项目)才能被视为可查看。
在您的示例中,您将itemVisiblePercentThreshold设置为100,这意味着至少要100%的项目在屏幕上可见才能被视为可查看。但是,正如您在屏幕截图中所看到的,最上面的项目在屏幕上并不是完全可见的,因此根据配置,它不应被视为可查看的。
要解决此问题,需要将itemVisiblePercentThreshold参数调整为一个值,该值准确反映项目在屏幕上可见的数量。例如,如果您希望项目仅在屏幕上完全可见时才被视为可查看,您可以将itemVisiblePercentThreshold设置为100。如果您希望即使在屏幕上只能看到项目的一半时也可以查看该项目,则可以将itemVisiblePercentThreshold设置为50。
以下是示范如何调整itemVisiblePercentThreshold参数的范例程式码片段:

// Set the itemVisiblePercentThreshold to the desired value
this.clippingListViewabilityConfig = {
    waitForInteraction: false,
    itemVisiblePercentThreshold: 50, // At least 50% of the item needs to be visible on the screen
    minimumViewTime: 500, //In milliseconds
};

...

// Use the updated ViewabilityConfig in the FlatList component
<FlatList
    viewabilityConfig={this.clippingListViewabilityConfig}
    ...
/>

通过调整itemVisiblePercentThreshold参数,可以确保onViewableItemsChanged事件仅返回根据所需条件在屏幕上实际可见的项目。

相关问题