再记section list 操作

      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>
);

}
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。