再记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 (
   {
      // console.warn(Math.random());
      return Math.random();
    }}
    renderSectionHeader={this.groupHeader} // section header
    renderItem={this.eachMatch}
    extraData={this.state}
    ItemSeparatorComponent={() => {
      return (
        
      );
    }}
    // 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 (
  
     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}
    />
  
);

}
}

你可能感兴趣的:(再记section list 操作)