Стиль контейнера элементов FlatList React Native отдельно от верхнего / нижнего колонтитула?

Question

У меня есть FlatList с использованием ListHeaderComponent и ListFooterComponent.

Есть ли способ стилизовать контейнер предметов (которые взяты из data опоры), но не включают верхний и нижний колонтитулы с в?

https://snack.expo.io/@jamesweblondon / жирный крендель

import React from "react";
import { View, Text, FlatList } from "react-native";

const exampleData = [...Array(20)].map((d, index) => ({
  key: `item-${index}`,
  label: index,
  backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${
    index * 5
  }, ${132})`,
}));

const Example = () => {
  const renderItem = ({ item }) => {
    return (
      <View
        style={{
          flexDirection: "row",
          width: "100%",
          backgroundColor: item.backgroundColor,
        }}
      >
        <Text
          style={{
            fontWeight: "bold",
            color: "white",
            fontSize: 32,
            height: 100,
          }}
        >
          {item.label}
        </Text>
      </View>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={exampleData}
        renderItem={renderItem}
        keyExtractor={(item) => item.key}
        ListHeaderComponent={
          <View
            style={{
              backgroundColor: "grey",
              height: 200,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text>Before list</Text>
          </View>
        }
        ListFooterComponent={
          <View
            style={{
              backgroundColor: "grey",
              height: 200,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text>After list</Text>
          </View>
        }
      />
      <View
        style={{
          backgroundColor: "gold",
          height: 200,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Text>Footer</Text>
      </View>
    </View>
  );
};

export default Example;

В настоящее время это выглядит так:

Идентификатор элемента, позволяющего мне обернуть data, чтобы я мог добавить отступы, границы и т. Д. c:

Answer 1

Проверьте contentContainerStyle опору в FlatList, она должна помочь вам сделать именно то, что вы ищете.