ItemSeparatorComponent - 每行回调

Question

How do I make ItemSeparatorComponent prop of FlatList get called for each row, so that one can customize for each row. Something similar of what renderSeparator prop of deprecated ListView .

Answer 1

I had the same requirement, turns out you can pass a function as well:

renderSeparator = ({leadingItem, section})=>{
  if (section.noSeparator || !leadingItem.noSeparator)
    return null;
  return <Separator />;
};

render(){
  return <SectionList
      renderSectionHeader={this.renderSectionHeader}
      sections={this.sections}
      renderItem={this.renderItem}
      ItemSeparatorComponent={this.renderSeparator}
  />;
}

Answer 2

To show ItemSeparatorComponent , make your own separator or declare inbuild separator from react-native. The separator need to be put just above the FlatList so that it renders in the right place. The separators are visible at the end and beginning of the list. Below is the code for separator in FlatList :

{/* ... */}

render()
{
    return(

        {/* ... */}

        <SeparatorComponent />  //separator component
        <FlatList
            ItemSeparatorComponent={SeparatorComponent} // assign the separator here  

            {/* ... */}

            />
    )
}

Cheers :)