在RN doc Flatlist单元中,有一个描述:为了限制内存并实现平滑滚动,内容在屏幕外异步呈现。这意味着滚动速度可能比填充速度快,并暂时看到空白内容。这是一个权衡,可以调整以适应每个应用程序的需求,我们正在幕后改进它。我面临的问题,有时空白内容显示。如何提高填充率时,使用Flatlist组件?
Flatlist
58wvjzkj1#
我不知道你是否解决了这个问题,但是我写了关于FlatList性能的this article,你应该看看!在你的问题中,你问到了提高“填充率”。严格地说,要提高填充率,你需要调整两个 prop :updateCellsBatchingPeriod和maxToRenderPerBatch。updateCellsBatchingPeriod是以毫秒为单位的间隔,默认值为50。maxToRenderPerBatch是每次updateCellsBatchingPeriod迭代时呈现的项数。默认值为10。问题是,你可以设置一个较低的maxToRenderPerBatch和一个较低的updateCellsBatchingPeriod,以在一个较小的间隔内渲染较少的项目,或者设置一个较大的maxToRenderPerBatch和一个较大的updateCellsBatchingPeriod,以在一个较大的间隔内渲染较多的项目,哪一个最适合你。但是天下没有免费的午餐。例如,每秒的操作数越多,就意味着对触摸事件的响应越慢。所以我建议您看一看我的文章,了解更多关于如何增强FlatList的信息。
updateCellsBatchingPeriod
maxToRenderPerBatch
ejk8hzay2#
默认值为使用maxToRenderPerBatch={10} 10。请查看虚拟化列表
maxToRenderPerBatch={10}
pu3pd22g3#
这可能有助于使用这些 prop 来调整:
maxToRenderPerBatch={1000} windowSize={60} updateCellsBatchingPeriod={50} initialNumToRender={50}
ubbxdtey4#
当使用Flatlist组分时可以提高填充率:
4条答案
按热度按时间58wvjzkj1#
我不知道你是否解决了这个问题,但是我写了关于FlatList性能的this article,你应该看看!
在你的问题中,你问到了提高“填充率”。严格地说,要提高填充率,你需要调整两个 prop :
updateCellsBatchingPeriod
和maxToRenderPerBatch
。updateCellsBatchingPeriod
是以毫秒为单位的间隔,默认值为50。maxToRenderPerBatch
是每次updateCellsBatchingPeriod
迭代时呈现的项数。默认值为10。问题是,你可以设置一个较低的
maxToRenderPerBatch
和一个较低的updateCellsBatchingPeriod
,以在一个较小的间隔内渲染较少的项目,或者设置一个较大的maxToRenderPerBatch
和一个较大的updateCellsBatchingPeriod
,以在一个较大的间隔内渲染较多的项目,哪一个最适合你。但是天下没有免费的午餐。例如,每秒的操作数越多,就意味着对触摸事件的响应越慢。所以我建议您看一看我的文章,了解更多关于如何增强FlatList的信息。
ejk8hzay2#
默认值为使用
maxToRenderPerBatch={10}
10。请查看虚拟化列表pu3pd22g3#
这可能有助于使用这些 prop 来调整:
ubbxdtey4#
当使用
Flatlist
组分时可以提高填充率: