Style de séparateur pour l'en-tête et le corps dans FlatList

Question

Actuellement, j'ai un problème avec FlatList. J'ai un composant pour rendre une liste de livres. Par conception, la largeur de l'en-tête correspond à la largeur de l'écran et le corps de l'ouvrage aura un padding gauche et droit de 10px.

J'ai donc utilisé contentContainerStyle={{paddingHorizontal: 10}} . Mais le résultat est que l'en-tête et le corps ont un padding de 10px à gauche et à droite.

Veuillez suggérer un moyen de le résoudre. Désolé pour mon mauvais anglais !

Mise à jour : Je suis désolé de ne pas avoir décrit mon problème en détail.

En main.tsx

...
public render() {
  return (
    <FlatList
      key...
      data={..}
      renderItem={this.renderItems}
      ListHeaderComponent={this.renderHeader}
      contentContainerStyle={styles.contentStyle}
    />
  );
}

private renderHeader = () => {
  return (
    <View style={style.header}
      //TODO something ...
    </View>
  );
}

private renderItems: ListRenderItem<IBook> = ({ item: {bookId} }) => bookId ?
  (
    <BookGridCell
      title={...}
      image={...}
      //TODO more..
    />
  ) : <View style={styles.emptyBox} /> 
}

Sur renderItems J'ai appelé un composant BookGridCell . Dans ce composant, le design d'un livre est mis en place. Donc si j'ajoute directement le style dans renderItems En effet, chaque livre aura une marge gauche et droite de 10px, mais pas le corps entier.

Quand utiliser contentContainerStyle avec contenContainerStyle

Lorsque vous ajoutez directement un style à l'intérieur renderItems sans utiliser contentContainerStyle

Answer 1

1. Donnez un style à votre corps.

   style={styles.bodyContainer}

et ensuite dans la feuille de style ajouter la propriété.

    const styles = StyleSheet.create({
    bodyContainer: {
      paddingHorizontal: 10    
      },

C'est la façon correcte ou

2. vous pouvez directement ajouter du rembourrage dans votre vue.

   style={{ paddingHorizontal: 10 }}