RN中關於ListView的使用

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>