Применять backgroundColor и elevation / shadow только к контейнеру элементов FlatList (исключая заголовок)

Question

Мне нужно, чтобы backgroundColor и elevation / shadow* применялись только к контейнеру элементов FlatList, а не к заголовку. Если для стиля FlatList установлено значение elevation, тень будет на границах всего списка: элементы и заголовок в целом, но мне нужно, чтобы он был на границах, если контейнер элементов только. Возможно ли это или есть какой-то трюк для достижения этого?

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>
      }
    />

использовать contentContainerStyle FlatList для добавления некоторого отступа внутри FlatList, чтобы элементы не "их тень обрезана границами FlatList