section-fs8.png
首先是數(shù)據(jù)結(jié)構(gòu)萌朱，上面是 header, 中間 3 個(gè) section
let ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
});
let data = {
section1: [{
title: '我的憑證',
rightTitle: '互助憑證乌奇、充值'
}, {
title: '生命樹(shù)葉',
}, {
title: '申請(qǐng)互助',
}],
section2: [{
title: '我的邀請(qǐng)',
}, {
title: '邀請(qǐng)有禮',
rightTitle: '邀請(qǐng)好友得生命樹(shù)葉'
}],
section3: [{
title: '常見(jiàn)問(wèn)題',
}, {
title: '設(shè)置',
}],
};
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 是每一行的數(shù)據(jù)
// sectionID 可以通過(guò) cloneWithRowsAndSections 傳入，如果不傳入默認(rèn)是
// 對(duì)象的 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
