反应本机FlatList onViewableItemsChanged返回不正确的项目集

时间:2018-11-19 10:13:46

标签: react-native react-native-flatlist react-android

我正在尝试使用 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
    };

0 个答案:

没有答案