React-native ListView分组demo

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)

});

效果图