React-Native ListView的分组使用心得
对于官方给的DataSource使用说法可能对于单一的一组使用很容易处理，但是使用到分组就会让人特别头疼，这些奇怪的构造方法会让人摸不着头脑，似乎这些方法都无法串联起来形成思维，但是多思考一下还是有办法可以解决的。
首先来看看它的4个可选的构造函数（四个参数都可以传）
1.getRowData(dataBlob, sectionID, rowID);
2.getSectionHeaderData(dataBlob, sectionID);
3.rowHasChanged(prevRowData, nextRowData);
4.sectionHeaderHasChanged(prevSectionData, nextSectionData);
官方的示例中简单的字符串数组数据是这样定义的new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
也就是说这4个参数其实就是四个函数，而这4个函数分别控制着DataSource如何给dataBlob（外部传入的数据，也是要处理的数据）分组以及获取其中“单个数据row”，
然后是实例外部传入数据的方法（这两个方法也是可选的，但是只能选其一）
cloneWithRows(dataBlob, rowIdentities)
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)
这个两个方法就很好解释了，第一个用来处理只有一组数据的情况， 第二个用来处理有多组数据的情况（也是下面会用到的方法），而对应传进来的参数决定着ListView如何分组，接下来会逐一讲到
ListView.DataSource有默认的三种处理数据的方式，但是大多数情况下服务器给的数据，并不是和这三种默认方式相匹配的，这时候就很尴尬了，那要怎样才能从这一大串JSON中匹配到我想要的那一个row数据呢，那么我们先从它的四个构造函数入手：
1.getRowData(dataBlob, sectionID, rowID);这个函数是用来告诉DataSource通过何种方式来获取RowData（单个row数据），先来看看外部传进来的三个参数，
dataBlob：总数据 ，
sectionID：每一组的ID，这个ID就是从外部传入的sectionIdentities数组中其中一个值，
rowID：是外部传入的二维数组rowIdentities中对应sectionID的数组中的其中一个值（数组是有序的集合）。
举个例子： 我要显示的是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 实现就是
getRowData = (dataBlob, sectionID, rowID) => {
let sectionData = dataBlob[sectionID]
let row = sectionData.children[rowID]
return row
}
2.getSectionHeaderData(dataBlob, sectionID);这个可选的函数是用于从dataBlob中获取每一组的headerData数据的两个参数和getRowData里一样
举例：
getSectionHeaderData = (dataBlob, sectionID) => {
let sectionData = dataBlob[sectionID]
//这里可以返回 sectionData 但是我哦这里只需要显示catName 字段的内容所以
return sectionData.catName
}
而对于3.rowHasChanged(prevRowData, nextRowData);和4.sectionHeaderHasChanged(prevSectionData, nextSectionData);两个构造函数是用于告诉ListView在什么情况下需要刷新视图内容用的，也就是优化用，这里不做过多介绍,返回值类型是Bool
rowHasChanged = (r1, r2) => r1 !== r2
sectionHeaderHasChanged = (prevSectionData, nextSectionData) => prevSectionData !== nextSectionData
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)里面三个字段，对于后两个字段一般在dataBlob数据类型是默认三种形式或者由数组包裹时可以不传，其他情况下都为必传字段
可以这样理解为sectionIdentities.map((sectionID, index, dataBlob)=>{
rowIdentities[index].map( (rowID, index, sectionID, dataBlob)=> getRowData(rowID, index, sectionID, dataBlob)) DataSource的处理将里面index给隐藏掉了
所以自定义构造函数时，sectionIdentities, rowIdentities这两个字段决定了传入数据的解析方式
以上面的dataBlob为例，这两个sectionIdentities， rowIdentities数组的获取方式可以是这样
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的分组简单使用方式，有什么不足的望大家见谅，提出来我一定改正
下面附上代码
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}/>
);
}
