React native 设置React Native'的容器的样式；是否将平面列表项与页眉/页脚分开？

我有一个使用

ListHeaderComponent

和

listFooter组件的
FlatList

是否有一种方法可以设置项目容器的样式（来自
数据
道具），但不包括带有in的页眉和页脚


从“React”导入React；
从“react native”导入{View，Text，FlatList}；
const exampleData=[…数组（20）].map（（d，索引）=>({
键：`item-${index}`，
标签：索引，
背景色：`rgb（${Math.floor（Math.random（）*255）}${
索引*5
}, ${132})`,
}));
常量示例=（）=>{
常量renderItem=（{item}）=>{
返回(
{item.label}
);
};
返回(
item.key}
列表头组件={
列表前
}
ListFooter组件={
后列表
}
/>
页脚
);
};
导出默认示例；

现在看起来是这样的：


我想要一个元素，允许我包装
数据
，以便添加填充、边框等：

查看
FlatList
中的
contentContainerStyle
道具，它将帮助您准确完成所需操作。
contentContainerStyle也会包装页眉和页脚。我只需要从数据道具渲染的项目被包装。是的，你是对的。我想到的唯一解决办法是做类似的事情。这有点粗糙，但它完成了任务。
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;