React Native ListView 自定义提取策略

标签（空格分隔）： 未分类

---

你可以在构造函数中针对section标题和行数据提供自定义的提取方法和hasChanged比对方法。如果不提供，则会使用默认的defaultGetRowData和defaultGetSectionHeaderData方法来提取行数据和section标题。

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

或者：

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

或者：

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

构造函数可以接受下列四种参数（都是可选）：

• getRowData(dataBlob, sectionID, rowID);
• getSectionHeaderData(dataBlob, sectionID);
• rowHasChanged(prevRowData, nextRowData);
• sectionHeaderHasChanged(prevSectionData, nextSectionData);

---

使用默认数据提取策略代码示例

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

---

自定义dataBlob提取数据策略

代码示例

 const getSectionData = (dataBlob, sectionId) => dataBlob[sectionId];
    const getRowData = (dataBlob, sectionId, rowId) => dataBlob[`${rowId}`];

    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged : (s1, s2) => s1 !== s2,
      getSectionData,
      getRowData,
    });

介绍方法api

cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities) 
cloneWithRows(dataBlob, rowIdentities) 

比如说你的数据结构是

{ s1: [ a1:value1, a2:value2, ... ], s2: [ b1:value1, b2:value2, ... ], ... }

rowIdentities是一个二维数组，包含了行数据对应的id标识符，例如[['a1', 'a2'], ['b1', 'b2', 'b3'], ...]。
sectionIdentities 。如果你不需要section，则直接使用cloneWithRows即可。

sectionIdentities同理是包含了section标识符的数组。例如['s1', 's2', ...]。

1. 确定你的数据结构

 "results": [
    {
      "id": 12348124,
      "users": [
        {
          "user": {
            "gender": "female",
            "name": {
              "title": "miss",
              "first": "marga",
              "last": "seegers"
            },
          },
        },
      ]
    },
    {
      "id": 12348124,
      "users": [
        {
          "user": {
            "gender": "female",
            "name": {
              "title": "miss",
              "first": "marga",
              "last": "seegers"
            },
          },
        },
      ]
    },
  ]

假设上述json为数据返回 我们需要分组展示到ListView上 result数组里每一个元素展示为一个section 每个section里有users数组展示为rows
首先解析json构造我们的数据结构

 var organizations = responseData.results,
            length = organizations.length,
            dataBlob = {},
            sectionIDs = [],
            rowIDs = [],
            organization,
            users,
            userLength,
            user,
            i,
            j;

        for (i = 0; i < length; i++) {
            organization = organizations[i];

            // Add Section to Section ID Array
            sectionIDs.push(organization.id);
            // Set Value for Section ID that will be retrieved by getSectionData
            dataBlob[organization.id] = id;

            users = organization.users;
            userLength = users.length;
            
            // Initialize Empty RowID Array for Section Index
            rowIDs[i] = [];

            for(j = 0; j < userLength; j++) {
                user = users[j].user;
                // Add Unique Row ID to RowID Array for Section
                rowIDs[i].push(user.md5);

                // Set Value for unique Section+Row Identifier that will be retrieved by getRowData
                dataBlob[organization.id + ':' + user.md5] = user;
            }
        }

2. 实现方法getSectionData 和 getRowData

 var getSectionData = (dataBlob, sectionID) => {
        return dataBlob[sectionID];
    }

    var getRowData = (dataBlob, sectionID, rowID) => {
        return dataBlob[sectionID + ':' + rowID];
    }

这两个方法主要是取得你自定义的数据结构里的值.

3. 生成DataSource

this.setState({
            dataSource : this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
        });

React Native ListView with Section Headers