ReactNative渲染嵌套列表很慢:建议

时间:2019-01-12 15:52:28

标签: react-native

JSON结构:

sectionItems={key: ..., name: .., title: ..listOf 20 nested data }

data = 
  {
    "sections": [...sectionItems of 50 items]
  }

When displaying in the FlatList its rendering too slow,

<FlatList
  renderItem={({item}) => <Section item={item} />}
  initialNumToRender={lastSelectedItemIndex}
/>

在FlatList之前,已经使用SectionList渲染数据,但是渲染数据太慢,要求一次显示所有内容,但是FlatList花费太多时间将项目加载到视口中,这表明更多空白。

呈现嵌套列表,SectionList或FlatList的最佳解决方案是什么,该列表应突出显示所选项目,所以我也需要连接存储。

1 个答案:

答案 0 :(得分:0)

我只是通过嵌套平面列表并在列表项中进行适当的渲染来做到这一点。例如,我有一份清单,每天都有“条目”。代替节列表,我有一个包含“天列表”的平面列表。日期列表显示新日期(例如1月14日)的列表标题。该列表项的其余部分是一个平面列表,其中包含该列表的所有条目。您可以通过使可包装的特定列表项可触摸来轻松突出显示。我必须一次渲染1000个元素,并且除了在同步过程之后进行大量更新之外,从来没有任何性能问题。我认为这种方法最适合您。