ReactNative之ListView学习总结（二）带有section的demo

来源：互联网发布：电音大神知乎编辑：程序博客网时间：2024/05/20 15:39

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
} from 'react-native';

export default class SectionListViewDemo extends Component {
constructor(props){
    super(props)
    //创建datasource对象，提供row的更新策略
    var ds = new ListView.DataSource({
      rowHasChanged:(r1, r2) => r1 !== r2,
      //这里指出了更新section的规则
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2
    })
    //厨师湖state的时候，初始化一个dagasource和一个data属性，后面构建listview的时候需要用到。
    this.state = {
    dataSource: ds,
    //这里使用了字典的方式，那么会自动将字典的key作为section 的部分显示出来
    data: {a:['h','m'], b:['l', 'f'], c:['c', 'd'], d:['l', 'i'], e:['o','h']}
}
}

_renderRow(rowData, rowId, sectionId) {
return (
<Text>{rowData + ' ' + rowId + ' ' + sectionId}</Text>
    );
}
//然后在render方法里面构建listview
render() {
    return (
      <View style={{flex: 1}}>
      <ListView
      //设置datasource
      dataSource = {this.state.dataSource.cloneWithRowsAndSections(this.state.data)}
      //注意， renderRow方法默人按照顺序有如下几个参数 (rowData, sectionID, rowID, highlightRow)，可以做实验，即便传递的参数顺序颠倒，但是还是会按照自有的顺序来实现
      renderRow = {(rowData, sectionId, rowId) => this._renderRow( rowData, sectionId, rowId)}
      />
      </View>
    );
}
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
},
welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
},
instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
},

});

从下图中可以看到不同的数据被正确划分到了不同的section下

0 0