ItemSeparatorComponent - 每行回調

Question

如何使ItemSeparatorComponent的道具FlatList被調用的每一行，這樣一方面可以自定義每個行。 類似於已棄用的ListView renderSeparator道具。

Answer 1

我有同樣的要求，結果你也可以傳遞一個函數：

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

要顯示ItemSeparatorComponent ，請制作自己的分隔符或從 react-native 聲明內置分隔符。 分隔符需要放在FlatList正上方，以便它呈現在正確的位置。 分隔符在列表的末尾和開頭可見。 下面是FlatList分隔符代碼：

{/* ... */}

render()
{
    return(

        {/* ... */}

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

            {/* ... */}

            />
    )
}

干杯:)