ListView至少需要两个属性才能构建 dataSource(数据源)，renderRow(cell行显示)和renderSeparator(分割线显示)
ListView属性列表
dataSource:
数据源
renderRow：cell行显示
renderSeparator：分割线显示
renderFooter：ListView头部显示
renderHeader：ListView底部部显示
renderSectionHeader：分组头部显示(ListView没有分组底部显示)
DataSource(数据源)相关方法列表
创建
new ListView.DataSource()
方法
rowHasChanged：行渲染规则[创建数据源时必须提供方法实现否则报错]
sectionHeaderHasChanged：分组头部渲染规则[如果需要分组创建数据源的时候此方法也是必须实现的方法]
cloneWithRows：普通列表添加数据
cloneWithRowsAndSections：分组列表添加数据
构建ListView
构建数ListView两步即可
1、构建数据源
1)创建数据源
//创建数据源时必须提供rowHasChanged的方法实现
var dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});
2)给数据源添加真实数据
//准备好的真实数据使用
//这里的真实数据可以是js对象
var realData = ["测试1",测试1","测试1"];
//如果是有分组的cloneWithRowsAndSections
var data = dataSource.cloneWithRows(realData);
2、渲染子部件
//分割线的key属性
var separatorKey = 0;
//渲染cell方法
_renderRow(rowData)
{
return(
<View style={{height:44,justifyContent:'center'}}>
<Text>{rowData}</Text>
</View>);
}
//渲染分割线
_renderSeparator()
{
return(<View key={separatorKey++} style={{backgroudColor:"#6666",height:0.5}} />);
}
render()
{
return(
<ListView
dataSource = {data}
renderRow = {(rowData) => this._renderRow(rowData)}
renderSeparator = {() => this._renderSeparator()}
/>
);
}
建议将数据的构造添加到控件的构造方法中
//这里将数据展示扩展到分组
// 构造
constructor(props) {
super(props);
// 初始状态
var realData = [["测试1","测试11","测试111"], ["测试2","测试22","测试222"],["测试3","测试33","测试333"]];
var dataSource = new ListView.DataSource({
rowHasChanged:(r1,r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2});
this.state = {
data : dataSource.cloneWithRowsAndSections(realData)
};
}
//渲染cell方法
_renderRow(rowData)
{
return(
<View style={{height:44,justifyContent:'center'}}> <Text>{rowData}</Text>
</View>);
}
//渲染分割线
_renderSeparator()
{
return(<View key={separatorKey++} style={{backgroundColor:"#6666",height:0.5}} />);
}
_renderSectionHeader(data,sectionID){ return<View style={{height:44,backgroundColor:'red'}}> <Text>{sectionID}</Text> </View>}
render()
{
return(
<ListView
dataSource = {this.state.data}
renderRow = {(rowData) => this._renderRow(rowData)}
renderSeparator = {() => this._renderSeparator()}
renderSectionHeader={(data,sectionID) => this._renderSectionHeader(data,sectionID)}
/>
);
}
监听ListView的滚动
方法
onscroll(event)：event滚动事件，event.nativeEvent.contentOffset(iOS专用)，滚动事件的监听需要设置一个阀值，用于告知系统在滚动到什么程度才能触发滚动事件，如果没有设置，将不能触发滚动scrollEventThrottle
注意：
1、ListView的renderRow警告需要key，设置renderRow中的component的key属性是没用的，需要设置renderSeparator中的component的key属性。同样的往一个Array中push多个component，需要每个component都有key属性且不可重复。
2、创建数据源时必须提供rowHasChanged的方法实现
3、如果需要分组创建数据源的时候sectionHeaderHasChanged也是必须实现的方法
4、rowHasChanged和sectionHeaderHasChanged的sectionID和rowID都是可以省略的，默认的rowID是从0开始到一次递加的整数，同样的如果分组默认的sectionID也是从0开始一次递加的整数。
5、建议在使用分组的时候构造数据源，真实数据直接使用二维数组，不分组使用以为数组
