总体思路是每一个section放一个大cell,这个大cell里放一个flatlist,再用flatlist实现小cell的横向排列,代码如下:
const arySections = [{key:"step1month4",stepName:'第1阶段',month:'2017年04月',startDay:17,count:12,cells:[1,1,2,2,3,6,4,5]},
{key:"step2month4",stepName:'第2阶段',month:'2017年04月',startDay:29,count:2,cells:[5]},
{key:"step2month5",month:'2017年05月',startDay:1,count:8,cells:[5]}
];
renderItem={this.renderBigItemView.bind(this)}
renderSectionHeader={this.renderSectionHeader.bind(this)}
contentContainerStyle={styles.listViewStyle}// 设置cell的样式
sections={this.getSections()}
keyExtractor={(item, index) => index}
// horizontal={false}
/>
renderBigItemView({item}) {
let arySmallItems = item.smallItems;
let nCellColumn = screenWidth <= 320 ? 5 : 6;
return (
data={arySmallItems}
renderItem={this.renderSmallItemView.bind(this)}
horizontal={false}
numColumns={nCellColumn}
keyExtractor={(item, index) => index}
/>
);
}
renderSmallItemView({item}) {return (
// 数据源
getCells(nSection) {
var Arr = [];
let sectionData = this.state.dataSource[nSection];
let aryCellsState = sectionData.cells;
for (var i = 0; i < sectionData.count; i++) {
let pCellInfo = aryCellsState.length > i ? aryCellsState[i] : aryCellsState[aryCellsState.length - 1];
Arr.push(
{
key: 'key:' + i + ',section:' + nSection,
state: pCellInfo.state,
day: sectionData.startDay + i,
month: sectionData.month,
dayCode: pCellInfo.dayCode
});
}
return Arr;
}
getSections() {
var Arr = [];
let arySections = this.state.dataSource;
if (Array.isArray(arySections)) {
for (var i = 0; i < arySections.length; i++) {
Arr.push({
data: [{smallItems: this.getCells(i)}], // 只显示一个cell
title: 'key' + i,
stepName: arySections[i].stepName,
month: arySections[i].month
});
}
}
return Arr;
}