如何单独设置 React Native FlatList 数据的样式？

Question

我有一个需要设置样式的标准 React Native FlatList 组件。我还有一个ListHeaderComponent，它应该有自己独立的样式。

我的问题是我需要设置FlatList 的data 部分的样式，而不影响ListHeaderComponent。

如果可能，我希望避免使用“hacky”解决方案。我看过FlatListdocumentation，没有任何道具可以实现这一点。

这里有一些代码供参考

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

最坏的情况，还有什么我可以用来实现这一点的吗？使用ScrollView 包裹FlatList 显然是行不通的。我需要FlatList 就像我需要data 的样式一样。

Answer 1

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