React Native FlatList使footer一直在最底部

最新推荐文章于 2022-02-27 21:28:01 发布

果维

最新推荐文章于 2022-02-27 21:28:01 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/wslcsok/article/details/102843606

版权

需求：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未被填满时在最底部。