美文网首页
React Native ListView 自定义提取策略

React Native ListView 自定义提取策略

作者: zh_19 | 来源:发表于2017-11-23 15:25 被阅读7次

    标签(空格分隔): 未分类


    你可以在构造函数中针对section标题和行数据提供自定义的提取方法和hasChanged比对方法。如果不提供,则会使用默认的defaultGetRowDatadefaultGetSectionHeaderData方法来提取行数据和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;
                }
            }
    
    1. 实现方法getSectionDatagetRowData
     var getSectionData = (dataBlob, sectionID) => {
            return dataBlob[sectionID];
        }
    
        var getRowData = (dataBlob, sectionID, rowID) => {
            return dataBlob[sectionID + ':' + rowID];
        }
    

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

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

    React Native ListView with Section Headers

    相关文章

      网友评论

          本文标题:React Native ListView 自定义提取策略

          本文链接:https://www.haomeiwen.com/subject/gcmzvxtx.html