React Native FlatList使footer一直在最底部

需求：FlatList使Footer一直在最底部。当内容不满的时候，footer在FlatList的最底部，当内容满了的时候，footer可以随FlatList滚动。

首先，要分清楚两个概念，FlatList的大小和FlatList的ContentSize的大小，FlatList的大小一般是固定的，而FlatList的ContentSize会随着内容而改变。FlatList可以理解为是Content的一个窗口。

 

给FlatList加上如下属性

<FlatList         ...         ListFooterComponent={this.renderFooter}         ListFooterComponentStyle={{ flex: 1, justifyContent: 'flex-end' }}         contentContainerStyle={{ flexGrow: 1 }} ...       />

contentContainerStyle={{ flexGrow: 1 }}的作用是，设置FlatList的contentSize最小值等于FlatList的大小（宽高）。

ListFooterComponentStyle={{ flex: 1, justifyContent: 'flex-end' }}的作用就是使footer在FlatList未被填满时在最底部。