FlatList在功能组件中设置ViewabilityConfig

Question

我有这个功能组件，现在我想配置viewabilityConfig，但当我试图滚动列表时，我得到了这个错误：

[Unhandled promise rejection: Invariant Violation: Must set exactly one of itemVisiblePercentThreshold or viewAreaCoveragePercentThreshold]

我曾试图将配置放入useRef中，但这会引发同样的错误。

export default function Test(){

const _viewabilityConfig = {
minimumViewTime: 50,
waitForInteraction: true,
viewAreaCoveragePercentThreshold: 100,
itemVisiblePercentThreshold: 80
}

return(
<View style={styles.container}>
<FlatList
data={dataSource}
viewabilityConfig={_viewabilityConfig}
onViewableItemsChanged={onViewRef.current}
ItemSeparatorComponent={renderSeperator}
ref={flatListRef}
/>
</View>
)
}

Answer 1

const _viewabilityConfig = useRef({
viewAreaCoveragePercentThreshold: 60});

和在平面中

viewabilityConfig={_viewabilityConfig.current}

Answer 2

为什么同时需要itemVisiblePercentThreshold和viewAreaCoveragePercentThrecture？

请删除其中一个属性，然后重试。

看看这个就知道你到底想要什么。

Answer 3

我可以通过使用这个配置来解决这个问题

const _viewabilityConfig = {
minimumViewTime: 50,
viewAreaCoveragePercentThreshold: 100,
}