wake-up-neo.com

Reagieren Sie auf das native SectionList-Layout

Ich verwende, um mehrere Abschnitte mit einer anderen Abschnittsüberschrift zu rendern. Ich habe einige Probleme, es so anzuzeigen, wie ich es möchte. Ich möchte, dass meine Kopfzeile oben und darunter Elemente des Abschnitts als Raster angezeigt werden.

Das ist, was ich gerade habe

Mit diesem Code:

<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"
   }
});

Daher möchte ich das CSS von sectionListContainer nicht auf sectionHeader anwenden können. Aber ich bin mir nicht sicher, ob es möglich ist.

Wenn jemand eine Ahnung davon hat, lass es mich wissen!

Vielen Dank!

7
iDams

Eine für uns funktionierende Lösung bestand darin, den renderSectionHeader auf die Breite des gesamten Containers zu zwingen und dadurch die Renderelemente in die nächste Zeile zu zwingen.

Wenn Sie Ihre Frage so aktualisieren, dass sie den Inhalt von renderSectionHeader enthält (wie bereits von NiFi gestellt), kann ich eine ausführlichere Antwort dazu geben, wie Sie renderSectionHeader aktualisieren würden.

1