让FlatList更早触发onendreach

Question

我使用FlatList来构建一个tiktok风格的视频播放器，即一个列表项覆盖整个屏幕。

我一次从REST API(通过useSWRInfinite)获取大约10个视频的元数据，然后填充我的FlatList并使用expo-av的Video组件和Mux.com进行播放。

现在当我到达视频10时，onEndReached被触发，然后加载下一个10个视频，等等。我怎样才能改变这一点，使onEndReached已经在视频9上被触发?

代码

// Fine-tuning video feed experience:
const VIDEO_FEED_ITEMS_TO_FETCH_API = 10
const VIDEO_FEED_ITEMS_TO_RENDER = VIDEO_FEED_ITEMS_TO_FETCH_API - 2
const VIDEO_FEED_FLATLIST_OPTIONS = {
removeClippedSubviews: true, // views that are outside of the viewport are detached from the native view hierarchy
windowSize: 3, // measurement unit where 1 is equivalent to your viewport height
initialNumToRender: VIDEO_FEED_ITEMS_TO_RENDER, // number of items that would cover the screen for every device
maxToRenderPerBatch: VIDEO_FEED_ITEMS_TO_RENDER, // the next chunk of items rendered on every scroll
updateCellsBatchingPeriod: 100, // the time interval (ms) between each batch of items rendered
onEndReachedThreshold: 0.001 // limit where next API fetch is triggered (% of viewport height)
}
<FlatList
ref={flatList}
data={videos}
renderItem={renderItem}
initialScrollIndex={videoToScrollToIndex}
getItemLayout={getItemLayout}
onScrollToIndexFailed={handleScrollFailed}
showsVerticalScrollIndicator={false}
snapToInterval={viewAreaHeight}
snapToAlignment='start'
decelerationRate='fast'
viewabilityConfig={VIEWABILITY_CONFIG}
onViewableItemsChanged={handleViewableItemsChanged}
onEndReached={handleEndReached}
{...VIDEO_FEED_FLATLIST_OPTIONS}
/>

Answer 1

您可以在VIDEO_FEED_FLATLIST_OPTIONS对象中使用onEndReachedThreshold。更多信息请访问docs

const VIDEO_FEED_FLATLIST_OPTIONS = {
removeClippedSubviews: true, // views that are outside of the viewport are detached from the native view hierarchy
windowSize: 3, // measurement unit where 1 is equivalent to your viewport height
initialNumToRender: VIDEO_FEED_ITEMS_TO_RENDER, // number of items that would cover the screen for every device
maxToRenderPerBatch: VIDEO_FEED_ITEMS_TO_RENDER, // the next chunk of items rendered on every scroll
updateCellsBatchingPeriod: 100, // the time interval (ms) between each batch of items rendered
onEndReachedThreshold: 1.5 // limit where next API fetch is triggered (% of viewport height)
}