反应原生 SectionList 布局答案

【问题标题】：React native SectionList layout反应原生 SectionList 布局
【发布时间】：2017-04-11 16:06:52
【问题描述】：

我正在使用不同的部分标题来呈现多个部分。我在以我想要的方式显示它时遇到了一些麻烦。我想让我的标题在顶部和下面，该部分的项目作为网格。

使用此代码：

<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。但我不确定这是否可能。

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

谢谢！

【问题讨论】：

可以发一下renderSectionHeader的内容吗？像here 那样为标题和项目使用单独的样式定义是否有问题？从发布的代码来看，您似乎没有这样做。

标签： javascript css react-native react-native-flatlist

【解决方案1】：

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

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

【讨论】：