仅将 backgroundColor 和高度/阴影应用于 FlatList 的项目容器（不包括标题）

【问题标题】：Apply backgroundColor and elevation/shadow only to FlatList's items container (excluding the header)仅将 backgroundColor 和高度/阴影应用于 FlatList 的项目容器（不包括标题）
【发布时间】：2019-10-24 19:33:55
【问题描述】：

我需要将backgroundColor 和elevation/shadow* 仅应用于FlatList 的项目容器，而不是标题。如果FlatList 样式设置了elevation，阴影将位于整个列表的边界：项目和标题作为一个整体，但如果仅项目容器，我需要它位于边界。这是可能的还是有什么技巧可以做到这一点？

【问题讨论】：

将这些样式应用到在您的 renderItem 中创建的顶级组件

标签： react-native react-native-flatlist

【解决方案1】：

您需要将所需样式应用于项目本身，而不是 FlatList 组件：

<FlatList
      data={[{ name: 'item1' },{ name: 'item2' },{ name: 'item3' }]}
      keyExtractor={(item, index) => `${index}`}
      renderItem={({ item }) =>
        <View
          style={{
            shadowColor: 'rgb(0, 0, 0)',
            shadowOffset: {
              width: 3,
              height: 3,
            },
            shadowOpacity: 0.5,
            shadowRadius: 5,
            elevation: 2,
            backgroundColor: 'white',

            padding: 10,
            margin: 10,
          }}
        >
          <Text>
            {item.name}
          </Text>
        </View>
      }
    />

使用 FlatList 的 contentContainerStyle 属性在 FlatList 中添加一些填充，这样项目的阴影就不会被 FlatList 的边界切断

【讨论】：