React Native（五）实现列表

Posted 2023-03-09

参考技术A 一、ListView已被弃用。新版React Native推荐使用FlatList。
在React Native0.43版本中引入了FlatList,SectionList与VirtualizedList，其中VirtualizedList是FlatList 与 SectionList 的底层实现。

二、关于把 FlatList 或 SectionList 控件放在 ScrollView 中的时候，调试的时候会有如下黄盒警告：
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

FlatList 和 SectionList 都是用的 Virtualized Lists。Virtualized Lists， 是一种带有性能优化的 List，在 List 很大时Virtualized Lists有明显的内存优化结果。怎么个优化法呢？例如一个 List 有一千个 Cell，如果没有优化，这一千个 Cell 都会被渲染并保持在内存中，内存会明显升高。Virtualized lists 的做法是，只让显示在屏幕上的 Cell 渲染，其它的没有显示在屏幕上的 Cell 销毁。这样就节省很多内存。

原因：那现在你把 Virtualized List 放在 ScrollView 中，ScrollView 是要全部渲染的，那么 Virtualized List 就计算不出来哪些 Cell 目前显示在屏幕上，会渲染所有的 Cell，那么它的优势就显现不出来了。这个时候就会抛出上述警告。

解决方法：把要一起滚动的组件放在 FlatList 的 ListHeaderComponent 或 ListFooterComponent 中。这样就不需要 ScrollView 了。

改之前：
render()
return (
<ScrollView>
<Title>Welcome</Title>
<Text>Take a look at the list of recipes below:</Text>
<FlatList
data=recipes
renderItem=renderItem
/>
<Footer/>
</ScrollView>
);


改之后：
render()
return (
<FlatList
LisHeaderComponent=
<>
<Title>Welcome</Title>
<Text>Take a look at the list of recipes below:</Text>
</>
data=recipes
renderItem=renderItem
ListFooterComponent=
<Footer/>
/>
);