一、长列表LargeList
在app应用中会出现大量的列表数据,用原生的ScrollView滑动的话,性能不高。这里我采用了react-native-largelist-v3,文档的话,可以参考这里。具体的一些组件优劣势和参数配置都有说明。这里就不细说了。
该组件主要为三个列表项目:LargeList,WaterfallList,StickyForm。
主要讲下使用LargeList过程中遇到的常见问题吧:
- 该 的data数据源必须是两层的。第一层为section部分,第二层就是具体的元素展示了。且items这个字段名必须为items,不可改变。
list:[{
items:[{
obj},{
obj},{
obj},{
obj}...]
},{
items:[{
obj},{
obj},{
obj},{
obj}...]
},
....
]
- 每一个元素间如果有间隙的话,(比如说是:marginTop:10)这些。
renderIndexPath = ({ section, row }) => (
return <View>
<TouchableOpacity style={
{margin:10}}>
{...}
</TouchableOpacity>
</View>
)
- LargeList默认具有{flex:1}的样式,因此要使LargeList正常工作,它的父容器必须是确定高度的,你也可以通过手动指定样式,使之正常工作
- 在V3中,为了最大化优化性能,减少DOM节点数量, renderInd