FlatList SectionList 泛型解析

问题

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

renderItem({ item, index, separators });

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

例如：

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

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

renderItem = (item: ListRenderItemInfo<DataItem>) => {}

<FlatList<DataItem>
    data={this.state.data}
    keyExtractor={this.keyExtractor}
    renderItem={this.renderItem}
/>

数据类型

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

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

FlatList用法

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

SectionList用法

<SectionList<DataItem, DataSectionItem>
          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 (
    <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
      <Text style={styles.title}>{item.title}</Text>
    </TouchableOpacity>
  );
}
  
 renderItem = (info: SectionListRenderItemInfo<DataItem, DataSectionItem>) => {
    const backgroundColor =
      info.item.id === this.state?.selectedId ? '#6e3b6e' : '#f9c2ff';
    return (
      <Item
        item={info.item}
        onPress={() => this.setState({selectedId: info.item.id})}
        style={{backgroundColor}}
      />
    );
  };

  renderSectionHeader = (info: {
    section: SectionListData<DataItem, DataSectionItem>;
  }) => {
    console.log(JSON.stringify(info) + DATA.indexOf(info.section));
    let s =
      info.section.key + '-' + info.section.title + '-' + info.section.data;
    return (
      <View style={styles.item}>
        <Text style={styles.title}>{s}</Text>
      </View>
    );
  };