Question

我需要将backgroundColor和elevation / shadow*仅应用于FlatList的项目容器，而不应用于标题。如果FlatList样式设置为elevation，则阴影将位于整个列表的边界：项目和标题作为一个整体，但是如果仅是items容器，则我需要使其位于边界。这可能吗，或者有什么技巧可以实现？

Answer 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的边界遮挡住

仅将backgroundColor和height / shadow应用于FlatList的项目容器（不包括标题）

1 个答案: