Réagir à la mise en forme native

Question

J'utilise pour rendre plusieurs sections avec un en-tête de section différent. J'ai du mal à l'afficher comme je le souhaite. Je voudrais avoir mon en-tête en haut et en dessous, les éléments de la section sous forme de grille.

C'est ce que j'ai en ce moment

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

Je voudrais donc pouvoir ne pas appliquer le css de sectionListContainer à sectionHeader. Mais je ne suis pas sûr que ce soit possible.

Si quelqu'un a une idée à ce sujet, faites le moi savoir!

Merci!

Answer 1

Une solution qui a fonctionné pour nous consistait à forcer le renderSectionHeader à avoir la largeur du conteneur entier, forçant ainsi les éléments de rendu à la ligne suivante.

Si vous mettez à jour votre question pour inclure le contenu de renderSectionHeader (comme déjà demandé par NiFi), je pourrais fournir une réponse plus détaillée sur la manière de mettre à jour renderSectionHeader.