ListView 详解

在应用开发中,最常见的就是列表,在react native中以ListView组件

一、ScrollView

ListView继承自ScrollView,所以我们先来了解一下ScrollView。ScrollView顾名思义,是可以滚动的视图控件。

1.3 下拉刷新

refreshControl

1.4 滚动事件

onScroll方法会在每一帧,我们可以通过设置scrollEventThrottle属性来控制onScroll的触发频率

1.5 横向滚动

由于在实际开发中会经常,设置horizontaltrue

值得注意的是ScrollView暂时还支持与其他成为响应的组件一起使用,比如ScrollView不能跟WebView一起用,ScrollView不能跟ListView一起使用,会导致一系列的滑动问题

二、ListView概述

下图展示了一个完整的ListView所有的。

ListView 可以分为纯列表以及分组的列表。

constructor(){
super();
var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
this.state = {
dataSource: ds.cloneWithRows(['北京','上海','南京','苏州','广州'])
};
}

渲染函数

render(){
return (
<ListView dataSource={this.state.dataSource}
renderRow={(rowData)=> <Text>{rowData}</Text>}/>
);

三、数据源

ListView的数据源是一个ListView.DataSource对象的实例,

3.1 数据源类型

ListView的数据源可以是如下的几种格式

一个纯数组,数据中包含每个rowData:
[<rowData1>, <rowData2>, <rowData3>, ...]
或者是由多个section组成的,每一个section对应一个数组数据:
{
sectionID_1: [<rowData1_1>, <rowData1_2>, <rowData1_3>, ...],
sectionID_2: [<rowData2_1>, <rowData2_2>, <rowData2_3>, ...],
sectionID_3: [<rowData3_1>, <rowData3_2>, <rowData3_3>, ...],
...
}
或者更加细分,每个section中每个数据都有一个rowID:
{
sectionID_1: {
rowID_1:<rowData1>,
rowID_2:<rowData2>,
...
},
sectionID_2: {
rowID_1:<rowData1>,
rowID_2:<rowData2>,
...
},
...
}

3.2 更新数据源

使用cloneWithRows或者cloneWithRowsAndSections来更新数据源中的数据。

Grid

Section Header

默认ListView是垂直滚动的,我们也可以通过设置ListViewhorizontal属性将ListView设置为横向滚动。

下拉刷新

由于ListView继承自ScrollView,

四、ListView 渲染优化