section-fs8.png
首先是数据结构，上面是 header, 中间 3 个 section
let ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
});
let data = {
section1: [{
title: '我的凭证',
rightTitle: '互助凭证、充值'
}, {
title: '生命树叶',
}, {
title: '申请互助',
}],
section2: [{
title: '我的邀请',
}, {
title: '邀请有礼',
rightTitle: '邀请好友得生命树叶'
}],
section3: [{
title: '常见问题',
}, {
title: '设置',
}],
};
let dataSource = ds.cloneWithRowsAndSections(data);
cloneWithRowsAndSections
<ListView
enableEmptySections={true}
dataSource={dataSource}
renderRow={this._renderRow}
renderHeader={this._renderHeader}
renderFooter={this._renderFooter}
renderSectionHeader={this._renderSectionHeader}
renderSeparator={this._renderSeparator}
/>
_renderHeader() {
}
_renderRow(rowData, sectionID, rowId) {
// rowData 是每一行的数据
// sectionID 可以通过 cloneWithRowsAndSections 传入，如果不传入默认是
// 对象的 key, 这里就是 section1 section2 section3
}
_renderSectionHeader(sectionData, sectionID) {
if (sectionID == 'section1') {
return null;
}
return (
<View style={{height:10}}></View>
);
}
_renderFooter() {
return (
<View style={{height:20}}></View>
);
}
_renderSeparator(sectionID, rowID) {
return (
<View
key={`${sectionID}-${rowID}`}
style={{height:1,backgroundColor:'#555'}}>
</View>
);
}
renderSectionHeader 绘制 section header
