使用“Flatlist”组件时如何提高填充率?

时间:2017-10-10 11:29:50

标签: reactjs react-native react-native-flatlist

在RN doc Flatlist单元中。有一个描述:

  

为了限制内存并启用平滑滚动,内容将在屏幕外异步呈现。这意味着可以比填充率更快地滚动并暂时看到空白内容。这是一个可以调整以适应每个应用程序需求的权衡,我们正在努力在幕后进行改进。

我面对这个问题,有时空白内容会显示出来。 如何在使用Flatlist组件时提高填充率?

3 个答案:

答案 0 :(得分:5)

我不知道你是否解决了这个问题,但是我写了关于FlatLists表现的this article,你应该看一看!

在您的问题中,您会询问有关提高“填充率”的问题。严格来说,为了提高您的填充率,您应该调整两个道具:updateCellsBatchingPeriodmaxToRenderPerBatch

updateCellsBatchingPeriod是以毫秒为单位的间隔,默认为50。

maxToRenderPerBatch是每次updateCellsBatchingPeriod次迭代时呈现的项目数。默认值为10.

事情是,您可以设置较低的maxToRenderPerBatch和较低的updateCellsBatchingPeriod,以便在较短的时间间隔内渲染较少的项目,或设置较大的maxToRenderPerBatch和较大的updateCellsBatchingPeriod在更大的间隔上渲染更多项目。哪种方式最适合你。

但是没有免费的午餐。例如,每秒执行更多操作意味着您对触摸事件的响应能力会降低。因此,我建议您查看我的文章,了解如何增强FlatList。

答案 1 :(得分:0)

使用maxToRenderPerBatch={10} 10是默认值。看看Virtualized List

答案 2 :(得分:0)

这可能有助于使用这些道具进行调整:

maxToRenderPerBatch={1000}
windowSize={60}           
updateCellsBatchingPeriod={50}   
initialNumToRender={50}