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,//獲取組中的數(shù)據(jù)
getRowData:getRowData,//獲取行中數(shù)據(jù)
rowHasChanged:(r1,r2) => r1!==r2,
sectionHeaderHasChanged:(s1,s2) => s1 !== s2
})
}
}
核心如下：
//復雜的操作遂填，數(shù)據(jù)請求 或者 異步操作(定時器)
componentDidMount(){
//調(diào)用json數(shù)據(jù)
this.loadDataFromJson();
}
loadDataFromJson(){
//拿到json數(shù)據(jù)
var jsonData = Car.data
//定義一些變量
var dataBlob = {},
sectionIDs = [],
rowIDs = [],
cars = [];
//遍歷
for (var i = 0; i < jsonData.length; i++){
//1.把組號放入sectionIDs數(shù)組中
sectionIDs.push(i)
//2.把組中內(nèi)容放入dataBlod對象
dataBlob[i] = jsonData[i].title
//3.取出該組中所有的車
cars = jsonData[i].cars
rowIDs[i] = [];
//4.遍歷所有的車數(shù)組
for(var j=0; j<car.length;j++){
rowIDs[i].push(j)
dataBlob[i+':'+j] = cars[j]
}}
//更新狀態(tài)
this.setState({
dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
});
效果圖
