反应原生SectionList布局

Question

我用来渲染具有不同节标题的多个部分。我按照我想要的方式显示它有些麻烦。 我希望我的标题位于顶部及其下方，该部分的项目为网格。

This is what I have right now

使用此代码：

<SectionList
        contentContainerStyle={styles.sectionListContainer}
        renderItem={this.renderItem}
        keyExtractor={this.getKey}
        renderSectionHeader={this.renderSectionHeader}
        shouldItemUpdate={this.shouldItemUpdate}
        sections={[
          { data: mostViewedArray, key: "most_viewed", title: "Most viewed" },
          { data: recentlyArray, key: "recently", title: "Recently" }
        ]}
      />



const styles = StyleSheet.create({
   sectionListContainer: {
     flex: 1,
     flexDirection: "row",
     flexWrap: "wrap",
     justifyContent: "space-between"
   }
});

所以我希望能够不将sectionListContainer的css应用于sectionHeader。但我不确定这是可能的。

如果有人有任何想法，请告诉我！

谢谢！

Answer 1

对我们有用的解决方案是强制renderSectionHeader拥有整个容器的宽度，从而强制渲染项到下一行。

如果您更新问题以包含renderSectionHeader的内容（如NiFi已经提出的那样），我可以提供更详细的答案，说明如何更新renderSectionHeader。