在做 React Native 项目的时候,使用 FlatList 控件。在布局上想在上面和下面空出一点空白,使得控件布局不那么局促给人一种拥挤到一块的感觉。

下意识的使用了 style:

<FlatList
  style={{ paddingTop: 20, paddingBottom: 10 }}
/>

但是效果发现,上面的空出来了,下面却没空,好像 paddingBottom 没有起作用。查了谷歌发现原来也有人有这样的疑问,在 GitHub 上有人提了相类似的问题,下面有人简短的做了回答

I added contentContainerStyle={{paddingBottom:xxx}} prop for extending the contentview. haven’t testet on Flatlist but works on SectionList

原来如果要改变 ListView 或者 FlatList 这种类似的由内容物的控件要修改 contentContainerStyle 属性。

<FlatList
  contentContainerStyle={{ paddingTop: 20, paddingBottom: 10 }}
/>

果然这样写的下面的留白也生效了。