React Native学习ListView（三）：吸顶效果

Demo展示

ios.gif

之前两篇文章ListView的学习都是展示了每一row的数据，而上面的效果图中不仅展示了row数据，而且还带有一个section header,当滑动时，这个section header会固定在头部，也就是吸顶效果。但是遗憾的是，在Android平台上不支持吸顶效果,如下图：

android.gif

Demo知识点

那如何来实现它了？我们都知道，在只简单地渲染每一行数据时，我们获取数据源时用ListView对象的cloneWithRows方法来获取的，而想要实现这种吸顶效果的话，需要使用 cloneWithRowsAndSections 方法。这个方法需要传入三个参数：

dataBlob        object类型
sectionIDs        array娄型
rowIDs            array类型

• dataBlob

它是一种数据结构，包含ListView所需的所有数据（section header 和 rows），如下图:

dataBlob.png

<font color=#ff0000 size=5 face="黑体">dataBlob 的 key 值包含 sectionID + rowId</font>,我们可以通过getSectionData 和 getRowData 来渲染每一行数据。

• sectionIDs

sectionIDs 用于标识每组section，如下图:

sectionIDs.png

• rowIDs

rowIDs 用于描述每个 section 里的每行数据的位置及是否需要渲染。在ListView渲染时，会先遍历 rowIDs 获取到对应的 dataBlob 数据。

rowIDs.png

Demo实现

• 数据内容

    {
      "data": [
        {
          "cars": [
            {
              "icon": "m_180_100",
              "name": "AC Schnitzer"
            },
            {
              "icon": "m_92_100",
              "name": "阿尔法·罗密欧"
            },
            {
              "icon": "m_9_100",
              "name": "奥迪"
            },
            {
              "icon": "m_97_100",
              "name": "阿斯顿·马丁"
            }
          ],
          "title": "A"
        },
        ...
      ]
    }

这里的'cars'和'title'属于data数据的一组，也就是我们上面讲的一组section数据，而它的sectionId就是0，因为是数组的第一个元素。然后title属于sectionHeader，而cars就是我们的row数据，而它的rowsId分别为：0~3

• 主要实现

  • 初始化ListView的dataSource对象，并且设置获取sectionHeader和sectionRow数据

      constructor(props) {
          super(props);
          var getSectionData = (dataBlob, sectionID) => {
              return dataBlob[sectionID];
          };
    
          var getRowData = (dataBlob, sectionID, rowID) => {
              return dataBlob[sectionID + ':' + rowID];
          };
    
          this.state = {
              dataSource: new ListView.DataSource({
                  getSectionData: getSectionData, // 获取组中数据
                  getRowData: getRowData, // 获取行中的数据
                  rowHasChanged: (r1, r2) => r1 !== r2,
                  sectionHeaderHasChanged: (s1, s2) => s1 !== s2
              })
          };
      }

  • 获取json数据，并将其放放dataBlob对象中

      var jsonData = this.props.data;
      var dataBlob = {},
          sectionIDs = [],
          rowIDs = [],
          cars = [];
      for (var i in jsonData) {
          //step 1、把组数据放入sectionIDs数组中
          sectionIDs.push(i);
          //step 2、把组中内容放dataBlob对象中
          dataBlob[i] = jsonData[i].title;
          //step 3、取出该组中所有的车
          cars = jsonData[i].cars;
          //step 4记录每一行中的数据
          rowIDs[i] = [];
          //step 5、获取行中每一组数据
          for (var j in cars) {
              //把行号放入rowIDs中
              rowIDs[i].push(j);
              //把每一行中的内容放dataBlob对象中
              dataBlob[i + ':' + j] = cars[j];
          }
      }

  • 刷新状态，将数据传入到listView中

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

  • 渲染ListView，设置相关属性

      <ListView
              dataSource={this.state.dataSource}
              renderRow={this.renderRow.bind(this)}
              renderSectionHeader={this.renderSectionHeader.bind(this)}
       />

好了。ListView吸顶效果的学习就完成了。完整代码

参考资料

http://moduscreate.com/react-native-listview-with-section-headers/