react-native - React Native FlatList onViewableItemsChanged 返回不正确的项目集
问题描述
我正在尝试使用onViewableItemsChanged事件来检测我的 FlatList 中当前显示在屏幕上的项目。
在我的 ViewabilityConfig(代码在下面提供)中,我将itemVisiblePercentThreshold参数设置为 100,我认为这需要我的项目完全显示才能被视为viewable。然而,对我来说并非如此。
正如您在以下屏幕 截图中看到的那样:我的应用程序的屏幕截图
很明显,最上面的项目并不完全在屏幕上(这应该使可见项目仅包含 3 个项目)。但是当我在我的onViewableItemsChanged事件处理程序中打印数组的长度时,它返回 4(当我检查值时,包括最上面的项目)。
这是 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
};
解决方案
推荐阅读
- flutter - 即使使用扩展也无法呈现列表视图构建器
- ios - 内部 UI 表视图不滚动
- node.js - Mongoose / MongoDB 在模式中具有唯一键的重复条目
- android-studio - CognitoUserSession 无效,因为 idToken 为空
- javascript - 为什么使用移动视图(媒体查询)时选项卡不起作用?
- git - Git 自动将代码从一个分支合并到同一仓库中的另一个分支
- r - 如果特征存在则变异,否则 NA_real_
- javascript - 如何防止存储在路由器堆栈中的 PrivateRoutes 在用户注销后重新渲染?
- python-3.x - 如何在包含特殊字符的文本中提取n位数字
- javascript - 更新类型阴影节点中的属性“顶部”时出错:RCTView