1. ListView dataSource

介绍：

ListView需要指定数据的来源。传入数据必须是数组，或者是字典里面嵌套数组

系统会根据你传入的数据自动生成section和row

每一个字典的key会被ListView拆分成一个section（小节，这里的section和原生的一样），如果你不指定sectionId，则key就是sectionId

如何使用。

在构造函数中指定ListView的取值策略，先new一个dataSource对象

constructor(props) {

super(props);

var ds =new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

}

rowHasChanged 可以是以下几种

1.getRowData(dataBlob, sectionID, rowID)：表明我们将以何种方式从dataBlob（数据源）中提取出rowData，sectionID用于指定每一个section的标题名（在renderRow，renderHeader等方法中会默认拆开并作为参数传入）

2.getSectionHeaderData(dataBlob, sectionID)：表明我们将以何种方式从dataBlob（数据源）中提取出HeaderData。HeaderData用于给每一个sectionHeader赋值

3.rowHasChanged(prevRowData, nextRowData)：指定我们更新row的策略，一般来说都是prevRowData和nextRowData不相等时更新row

4.sectionHeaderHasChanged(prevSectionData, nextSectionData)：指定我们更新sectionHeader的策略，一般如果用到sectionData的时候才指定

默认数据的提取策略

{ sectionID_1: { rowID_1: rowData1, ... }, ... }

或者：

==**{ sectionID_1: [ rowData1, rowData2, ... ], ... }**==

或者：

[ [ rowData1, rowData2, ... ], ... ]

作者：sidiWang

链接：https://www.jianshu.com/p/1293bb8ac969

來源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

大多数情况下我们会用到第二种（字典套数组）和第三种（纯数组），每一个数组对应的key系统会自动提取成sectionId。然后我们可以根据sectionId来判断所加载的section

为dataSource传递数据



cloneWithRows(dataBlob, rowIdentities)

dataBlob是原始数据源。在没有section的时候使用此方法

，传入一个数组。rowIdentities为可选类型，为数据源的每一项指明一个id

。默认的id为字符串'0','1','2'...dataBlob.count

cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)

字典套数组的结构（有section），我们使用下面的方法为数据源赋值。sectionIdentities和rowIdentities都是可选类型

例子1-最简单的ListView实现。

//1。构造函数中声明

/*第一步我们创建了DataSource对象，提供了row更新的策略。

然后我们在初始化state的时候，初始化一个dataSource和一个data属性

*/

constructor(props) {

        super(props);

        var ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!=r2})

        this.state={

            dataSource:ds,

            data:["h","h","h","h","h"]

        }

    }

//行方法

 _renderRow(rowData,rowId)

{

    return (

        <Text>{rowData+''+rowId}</Text>

    )

}

//listview 的使用。

/*

调用了dataSource对象提供的cloneWithRows方法给ListView的dataSource赋值，

并传入了数据源data。然后在renderRow方法中返回一个Text控件，将每一行的内容和rowId打印出来。

*/

<ListView

    dataSource={this.state.dataSource.cloneWithRows(this.state.data)}>

    renderRow={(rowData,sectionId,rowId)=>this._renderRow(rowData,rowId)}

</ListView>

例子2-实现一个带有section的ListView。

RN会根据你传入的数据源判断是否含有section，并调用cloneWithRowsAndSections把数据源传给ListView。如果你不指定sectionId，则RN会默认按之前提到过的数据结构取出相应的sectionId和rowId

注意，如果使用cloneWithRowsAndSections传入数据源，必须在构造方法里面传入sectionHeaderHasChanged方法

constructor(props) {

        super(props);

        var ds=new ListView.DataSource({

            rowHasChanged:(r1,r2)=>r1!=r2,

            sectionHeaderHasChanged:(s1,s2)=>s1!=s2

        })

        this.state={

            dataSource:ds,

            data:{a:['h','m'],b:['h1','m1'],c:['h2','m2']}

        }

    }

    // section 是a, rowid 是0开头， rowdata是h,m

_renderRow(rowData,rowId,sectionId)

    {

        return (

            <Text>{rowData+''+rowId+''+sectionId}</Text>

        )

    }

  <ListView

        dataSource={this.state.dataSource.cloneWithRowsAndSections(this.state.data)}>

        renderRow={(rowData,sectionId,rowId)=>this._renderRow(rowData,rowId,sectionId)}

    </ListView>

巴特西

RN中关于ListView的使用