React Native自己实现的ListView还有一个隐藏功能那就是Section。Section在文档里连一句话都没有给足,但确确实实的是内置的。使用Section可以给数据分组,并且每一个Section都有一个Header。Section Header可以像iOS的TableView的Section Header一样在滑动的时候保持当前的Section Header浮动在Table View的最上部。
在iOS上,只要添加了Section和Section Header以后,Section Header的行为就一定是和iOS的TableView的Section Header 一致的。这个在Android上还没有测试。
数据源的变化
要使用Section,那么首先一开始就需要告诉数据源不仅要考虑行的变化还要考虑Section Header的变化:
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
});
然后就要考虑数据的变化了。之前只需要一个数组就可以完成的,现在需要数据可以明确的区分出Section。最简单的一个数据源应该是这样的:
this.state = {
dataSource: ds.cloneWithRowsAndSections({
'section1': ['1'],
'section2': ['row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2']
})
};
单独的看数据是这样的一个形式:
{
'section1': ['1'],
'section2': ['row 1',