Question

请参阅https://facebook.github.io/react-native/docs/sectionlist.html

当其中一个Section为空时（数据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显示任何内容＆＃39;零件。看看下面的小例子：

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

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

Answer 2

我参加聚会的时间不算太晚，但是由于我只需要这样做，而且我花了比我愿意接受的时间多的时间，所以我会尽力整理一切。

您不能像使用FlatList组件那样使用SectionList的ListEmptyComponent来实现此目的。 ListEmptyComponent仅在数据属性为空时触发。但是，如果数据道具中有任意部分，则不会触发ListEmptyComponent。

一份答复建议使用renderItem并在其中检查section.data.length是否等于0。这是一个好主意，除了renderItem不会被包含{{ 1}}。 所以这种方法行不通。

剩下的是使用data.length === 0还是renderSectionHeader-您决定使用哪一个取决于您和您的特定用例。

renderSectionFooter函数接收到该部分，然后您就可以检查该部分是否具有长度大于0的数据道具。如果不是，这将是您输出EmptyComponent的机会。

对于问题中的特定示例，它看起来像这样：

renderSection*

Answer 3

<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
      }
    ].filter(s => s.data.length > 0)}
  />

尝试过滤掉空白部分:)

Answer 4

应该以我认为完全相同的方式工作：listEmptyComponent

或者你也可以在你的JSX中做一个条件来呈现没有数据的消息

Answer 5

 Let DATA = [{title:'title1',data['list1',list2']},{title:'title2',data:[]}

 <SectionList
                sections={DATA}
                keyExtractor={(item, index) => item + index}
                renderItem={({section, item}) => {
                  if (section.data.length === 0) {
                    return (
                   <View>
                        <Text>empty</Text>
                      </View>
                    );
                  }
                  return (
                    <View>
                      <Text>not empty</Text>
                    </View>
                  );
                }}
              />

渲染没有内容＆＃39; SectionList组件中的部分为空时的组件

5 个答案: