1.下拉刷新或者加载刷新时设置加载符:
onRefresh={true}
refreshing={!!status}--取双反(!!)阻止加载中会有undefined而报错.
不能写成
onRefresh={status}
refreshing={true},这样加载完后会顶部空白
2.数据结构层次不要太深,两层可以嵌套两个sectionlist来省去循环.
eachCup = cup => {
// const roe = [cup.item];
const { league, oddsNames } = cup.item;
// const match = cup.item.matches;
const cupInfos = [
{ ...{ key: { league, oddsNames } }, ...{ data: cup.item.matches } }
];
// console.warn('222', cupInfos);
return (
<SectionList
sections={cupInfos} // data of list
initialNumToRender={6}
keyExtractor={(item, index) => {
// console.warn(Math.random());
return Math.random();
}}
renderSectionHeader={this.groupHeader} // section header
renderItem={this.eachMatch}
extraData={this.state}
ItemSeparatorComponent={() => {
return (
<View style={{ height: 1, backgroundColor: '#b8b8b8' }}></View>
);
}}
// ListHeaderComponent={this.listHeader} //header of list
stickySectionHeadersEnabled={true}
/>
);
};
onRefresh = () => {
this.setState({ refreshing: true });
fetchData().then(() => {
this.setState({ refreshing: false });
});
};
render() {
const { data, status } = this.props;
return (
<View style={{ flex: 1 }}>
<SectionList
sections={data} // data of list
initialNumToRender={6}
onRefresh={() => null}
progressViewOffset={500}
refreshing={!!status}
// legacyImplementation={true}
automaticallyAdjustContentInsets={true}
// scrollsToTop={true}
centerContent={true}
renderSectionHeader={this.matchHeader} // section header
// renderItem={this.eachCup(item)} // row of list
renderItem={this.eachCup}
stickySectionHeadersEnabled={true}
extraData={this.state}
/>
</View>
);
}
}