對(duì)于官方給的DataSource使用說(shuō)法可能對(duì)于單一的一組使用很容易處理，但是使用到分組就會(huì)讓人特別頭疼，這些奇怪的構(gòu)造方法會(huì)讓人摸不著頭腦，似乎這些方法都無(wú)法串聯(lián)起來(lái)形成思維，但是多思考一下還是有辦法可以解決的。
首先來(lái)看看它的4個(gè)可選的構(gòu)造函數(shù)（四個(gè)參數(shù)都可以傳）
1.getRowData(dataBlob, sectionID, rowID);
2.getSectionHeaderData(dataBlob, sectionID);
3.rowHasChanged(prevRowData, nextRowData);
4.sectionHeaderHasChanged(prevSectionData, nextSectionData);
官方的示例中簡(jiǎn)單的字符串?dāng)?shù)組數(shù)據(jù)是這樣定義的new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
也就是說(shuō)這4個(gè)參數(shù)其實(shí)就是四個(gè)函數(shù)，而這4個(gè)函數(shù)分別控制著DataSource如何給dataBlob（外部傳入的數(shù)據(jù)，也是要處理的數(shù)據(jù)）分組以及獲取其中“單個(gè)數(shù)據(jù)row”，
然后是實(shí)例外部傳入數(shù)據(jù)的方法（這兩個(gè)方法也是可選的，但是只能選其一）
cloneWithRows(dataBlob, rowIdentities)
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)
這個(gè)兩個(gè)方法就很好解釋了，第一個(gè)用來(lái)處理只有一組數(shù)據(jù)的情況， 第二個(gè)用來(lái)處理有多組數(shù)據(jù)的情況（也是下面會(huì)用到的方法），而對(duì)應(yīng)傳進(jìn)來(lái)的參數(shù)決定著ListView如何分組，接下來(lái)會(huì)逐一講到
ListView.DataSource有默認(rèn)的三種處理數(shù)據(jù)的方式，但是大多數(shù)情況下服務(wù)器給的數(shù)據(jù)，并不是和這三種默認(rèn)方式相匹配的，這時(shí)候就很尷尬了，那要怎樣才能從這一大串JSON中匹配到我想要的那一個(gè)row數(shù)據(jù)呢，那么我們先從它的四個(gè)構(gòu)造函數(shù)入手：
1.getRowData(dataBlob, sectionID, rowID);這個(gè)函數(shù)是用來(lái)告訴DataSource通過(guò)何種方式來(lái)獲取RowData（單個(gè)row數(shù)據(jù)），先來(lái)看看外部傳進(jìn)來(lái)的三個(gè)參數(shù)，
dataBlob：總數(shù)據(jù) ，
sectionID：每一組的ID，這個(gè)ID就是從外部傳入的sectionIdentities數(shù)組中其中一個(gè)值，
rowID：是外部傳入的二維數(shù)組rowIdentities中對(duì)應(yīng)sectionID的數(shù)組中的其中一個(gè)值（數(shù)組是有序的集合）。
舉個(gè)例子： 我要顯示的是dataBlob中的“catName”字段
dataBlob =
?{"catId":1,"catName":"給水管", "children":[
? ? ? {"catId":11,"catName":"給水管66"},
? ? ? {"catId":12,"catName":"給水管667"}]},
{"catId":2,"catName":"排水管", "children":[
? ? ? {"catId":21,"catName":"排水管66"},
? ? ? {"catId":22,"catName":"排水管667"}]},
{"catId":3,"catName":"水管", "children":[
? ? ? {"catId":31,"catName":"水管66"},
? ? ? {"catId":32,"catName":"水管667"}]}
sectionIdentities = [1, 2, 3];
rowIdentities = [[1, 2], [1, 2], [1, 2]]；
getRowData 實(shí)現(xiàn)就是
getRowData = (dataBlob, sectionID, rowID) => {
let sectionData = dataBlob[sectionID]
let row = sectionData.children[rowID]
return row
}
2.getSectionHeaderData(dataBlob, sectionID);這個(gè)可選的函數(shù)是用于從dataBlob中獲取每一組的headerData數(shù)據(jù)的兩個(gè)參數(shù)和getRowData里一樣
舉例：
getSectionHeaderData = (dataBlob, sectionID) =>?{
let sectionData = dataBlob[sectionID]
//這里可以返回 sectionData? 但是我哦這里只需要顯示catName 字段的內(nèi)容所以
return? sectionData.catName
}
而對(duì)于3.rowHasChanged(prevRowData, nextRowData);和4.sectionHeaderHasChanged(prevSectionData, nextSectionData);兩個(gè)構(gòu)造函數(shù)是用于告訴ListView在什么情況下需要刷新視圖內(nèi)容用的，也就是優(yōu)化用，這里不做過(guò)多介紹,返回值類型是Bool
rowHasChanged = (r1, r2) => r1 !== r2
sectionHeaderHasChanged = (prevSectionData, nextSectionData) => prevSectionData !== nextSectionData
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)里面三個(gè)字段，對(duì)于后兩個(gè)字段一般在dataBlob數(shù)據(jù)類型是默認(rèn)三種形式或者由數(shù)組包裹時(shí)可以不傳，其他情況下都為必傳字段
可以這樣理解為sectionIdentities.map((sectionID, index, dataBlob)=>{
rowIdentities[index].map( (rowID, index, sectionID, dataBlob)=> getRowData(rowID, index, sectionID, dataBlob)) ?DataSource的處理將里面index給隱藏掉了
所以自定義構(gòu)造函數(shù)時(shí)，sectionIdentities, rowIdentities這兩個(gè)字段決定了傳入數(shù)據(jù)的解析方式
以上面的dataBlob為例，這兩個(gè)sectionIdentities， rowIdentities數(shù)組的獲取方式可以是這樣
getSectionIdentities = (dataBlob) =>{
? let sectionIdentities = ?[]
? for (let sectionIndex in dataBlob) {
? ? sectionIdentities.push(sectionIndex)
? }
? return sectionIdentities
}
getRowIdentities = (dataBlob) => {
? let rowIdentities =? []
? for (let sectionIndex in dataBlob) {
? ? let section = dataBlob[sectionIndex]
? ? let sectionArray = []
? ? for (let rowIndex in section.children) {
? ? ? sectionArray.push(rowIndex)
? ? }
? ? rowIdentities.push(sectionArray)
? }
? return rowIdentities
}
以上就是ListView.DataSource的分組簡(jiǎn)單使用方式，有什么不足的望大家見諒，提出來(lái)我一定改正
下面附上代碼
import React, {Component, PropTypes} from 'react';
import {Text, View, ListView} from 'react-native';
var dataBlob ={"catId":1,"catName":"給水管", "children":[{"catId":11,"catName":"給水管66"},{"catId":12,"catName":"給水管667"}]},{"catId":2,"catName":"排水管", "children":[{"catId":21,"catName":"排水管66"},{"catId":22,"catName":"排水管667"}]},{"catId":3,"catName":"水管", "children":[{"catId":31,"catName":"水管66"},{"catId":32,"catName":"水管667"}]}
export default class ProductView extends Component{??
constructor(props){? ??
super(props)? ??
?this.state = {? ? ?
? listDataSource: this.initialDataSouce(dataBlob)? };? }??
/* DataSource - listView */??
initialDataSouce = (data) =>{? ??
var ds = new ListView.DataSource({? ? ? rowHasChanged: (r1, r2) => r1 !== r2,
?getRowData: this.getListRowData, ? ??
sectionHeaderHasChanged:(prevSectionData, nextSectionData)=> prevSectionData !== nextSectionData,? ? ??
getSectionHeaderData: this.getListSectionHeaderData});? ??
return ds.cloneWithRowsAndSections(data, this.sectionIds(data), this.rowIds(data))??
}??
sectionIds = (dataBlob) =>{
let sectionIdentities = ?[]
for (let sectionIndex in dataBlob) {
sectionIdentities.push(sectionIndex)
}
return sectionIdentities
}
rowIds = (dataBlob) => {
let rowIdentities =? []
for (let sectionIndex in dataBlob) {
let section = dataBlob[sectionIndex]
let sectionArray = []
for (let rowIndex in section.children) {
sectionArray.push(rowIndex)
}
rowIdentities.push(sectionArray)?
}?
return rowIdentities
}
getListRowData = (dataBlob, sectionID, rowID) => {
let sectionData = dataBlob[sectionID]
let row = sectionData.children[rowID]
return row
}
getListSectionHeaderData = (dataBlob, sectionID) => {
let sectionData = dataBlob[sectionID]
return? sectionData.catName
}
/* ?listView視圖 ?*/
renderListRow = (rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) =>{? ?
return <View style={{height: 35, justifyContent:"center"}}><Text>{rowData.catName}</Text></View>
}
renderListSectionHeader = (sectionHeadData, sectionID) => { ? ?
return <View style={{height: 50, justifyContent:"center"}} ><Text>{sectionHeadData}</Text></View>
}
render() {?
return (
<ListView dataSource={this.state.listDataSource}
renderRow={this.renderListRow}
renderSectionHeader={this.renderListSectionHeader}/>
);
? ?}
