How to style React Native FlatList data separately?

Question

I have a standard React Native FlatList component that I need to style. I also have a ListHeaderComponent that should have its own separate styles.

My issue is that I need to style the data part of the FlatList without affecting the ListHeaderComponent .

I would hope to avoid a "hacky" solution, if possible. I have looked at the FlatList documentation and there are no props to achieve this.

Here is some code for reference

<FlatList
  data={DATA}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  ListHeaderComponent={<Component />}
/>

Worst case, is there anything else I could use to achieve this? Using a ScrollView to wrap the FlatList obviously doesn't work. I need the FlatList just as much as I need the styles of the data .

Answer 1

我将使用列表的 style 属性设置 FlatList 组件的样式，并使用ListHeaderComponentStyle单独设置 Header 样式或覆盖 FlatList 样式。