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  

            {/* ... */}

            />
    )
}

干杯:)