FlatList SectionList 泛型解析

问题

在使用FlatList和SectionList的时候， 我们需要提供几个渲染的方法。

renderItem({ item, index, separators });

但renderItem方法的item类型， 并不是我们data中直接提供的那个对象, 。

例如：

在使用TS开发时，希望renderItem方法能够指定类型。

renderItem = (item: ListRenderItemInfo) => {}

    data={this.state.data}
    keyExtractor={this.keyExtractor}
    renderItem={this.renderItem}
/>

数据类型

interface DataItem {
  id: string;
  title: string;
}

interface DataSectionItem {
  title: string;
  data: DataItem[];
}

FlatList用法

          data={DATA}
          renderItem={this.renderItem}
          keyExtractor={(item) => item.id}
          extraData={this.state}
/>
  
renderItem = (item: ListRenderItemInfo) => {
    const backgroundColor =
      item.item.id === this.state?.selectedId ? '#6e3b6e' : '#f9c2ff';
    return (
       this.setState({selectedId: item.item.id})}
        style={{backgroundColor}}
      />
    );
};

SectionList用法

          stickySectionHeadersEnabled={false}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => {
            return item + index?.toString();
          }}
          renderSectionHeader={this.renderSectionHeader}
          renderSectionFooter={this.renderSectionHeader}
          extraData={this.state}
          sections={DATA}
/>
  
function Item(props: {onPress: () => void; style: ViewStyle; item: DataItem}) {
  let {item, onPress, style} = props;
  return (
    
      {item.title}
    
  );
}
  
 renderItem = (info: SectionListRenderItemInfo) => {
    const backgroundColor =
      info.item.id === this.state?.selectedId ? '#6e3b6e' : '#f9c2ff';
    return (
       this.setState({selectedId: info.item.id})}
        style={{backgroundColor}}
      />
    );
  };

  renderSectionHeader = (info: {
    section: SectionListData;
  }) => {
    console.log(JSON.stringify(info) + DATA.indexOf(info.section));
    let s =
      info.section.key + '-' + info.section.title + '-' + info.section.data;
    return (
      
        {s}
      
    );
  };