将 React Native 的 FlatList 项目的容器与页眉/页脚分开设置样式？

Question

我有一个FlatList使用ListHeaderComponent和ListFooterComponent。

有没有一种方法可以设置项目容器（来自道具data）的样式，但不包括页眉和页脚？

https://snack.expo.io/@jamesweblondon/bold-pretzel

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这样我就可以添加填充、边框等：

Answer 1

查看contentContainerStyle中的道具FlatList，它应该可以帮助您准确地完成您正在寻找的事情。