时间戳

首页 > 解决方案 > 仅将 backgroundColor 和高度/阴影应用于 FlatList 的项目容器（不包括标题）

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

问题描述

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

标签： react-nativereact-native-flatlist

解决方案

您需要将所需样式应用于项目本身，而不是 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 的边界切断

推荐阅读