constructor(props){
super(props)
var getSectionData = (dataBlob,sectionIndex) => {
return dataBlob[sectionIndex]
}
var getRowData = (dataBlob ,sectionIndex, rowIndex) => {
return dataBlob[sectionIndex + ':' + rowIndex]
}
this.state = {
dataSource : new ListView.DataSource({
getSectionHeaderData: getSectionData,//获取组中的数据
getRowData:getRowData,//获取行中数据
rowHasChanged:(r1,r2) => r1!==r2,
sectionHeaderHasChanged:(s1,s2) => s1 !== s2
})
}
}
核心如下：
//复杂的操作，数据请求 或者 异步操作(定时器)
componentDidMount(){
//调用json数据
this.loadDataFromJson();
}
loadDataFromJson(){
//拿到json数据
var jsonData = Car.data
//定义一些变量
var dataBlob = {},
sectionIDs = [],
rowIDs = [],
cars = [];
//遍历
for (var i = 0; i < jsonData.length; i++){
//1.把组号放入sectionIDs数组中
sectionIDs.push(i)
//2.把组中内容放入dataBlod对象
dataBlob[i] = jsonData[i].title
//3.取出该组中所有的车
cars = jsonData[i].cars
rowIDs[i] = [];
//4.遍历所有的车数组
for(var j=0; j<car.length;j++){
rowIDs[i].push(j)
dataBlob[i+':'+j] = cars[j]
}}
//更新状态
this.setState({
dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
});
效果图
