react-native - 当 SectionList 组件中的部分为空时渲染 'no content' 组件

Question

见 https://facebook.github.io/react-native/docs/sectionlist.html

当 Section 之一为空时(例如 data prop 是一个空数组)，我仍然想呈现 SectionHeader，但也呈现一个指示该部分不包含数据的组件。

我知道对于 FlatList 组件，使用 ListEmptyComponent Prop 是可能的，但是这对于 SectionList 组件是如何工作的？

我希望有这样的事情(但它不起作用):

<SectionList
    style={styles.container}
    renderSectionHeader={({section}) => <SectionHeader title={section.title} />}
    sections={[
      {
        data: Object.values(this.props.teams),
        title: 'Teams',
        renderItem: this._renderTeamItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      },
      {
        data: Object.values(this.props.invites),
        title: 'Invites',
        renderItem: this._renderInviteItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      }
    ]}
  />

Answer 1

您可以使用 renderSectionFooter 来显示任何“无内容”组件。看看下面的小例子:

<SectionList
   renderSectionFooter={this.renderNoContent}
   section={[
      {data: ['1', '2']},
      {data: []}
   ]}
/>

renderNoContent = ({section}) => {
   if(section.data.length == 0){
      return NO_CONTENT_COMPONENT
   }
   return null
}