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