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 {rowData.catName}

}

renderListSectionHeader = (sectionHeadData, sectionID) => {    

return {sectionHeadData}

}

render() { 

return (

renderRow={this.renderListRow}

renderSectionHeader={this.renderListSectionHeader}/>

);

   }


你可能感兴趣的:(React-Native ListView的分组使用心得)