sectionlist里cell横向排列的方法

总体思路是每一个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]}
];
style={{flex: 1, marginTop: nTopMargin}}
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 (

style={{flex: 1, marginTop: 10, marginBottom: 10, backgroundColor: 'white'}}
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;
}

你可能感兴趣的:(sectionlist里cell横向排列的方法)