即使内容不够，也会在列表底部呈现 FlatList 页脚 [英] Render FlatList footer at the bottom of the list even if content is not enough

问题描述

我想在页面底部呈现 FlatList 的页脚，即使没有足够的内容来填满整个屏幕.

I want to render FlatList's footer at the bottom of the page even if there is not enough content to fill the whole screen.

推荐答案

为此，您需要查看 react-native 源.这里有一段代码显示在内部添加页脚.正如你所看到的，它包含在额外的 View 中，可以使用 ListFooterComponentStyle 属性设置样式.由于某种原因，文档中没有对其进行描述.

In order to do this, you need to take a look at react-native sources. Here there is a code which shows adding footer internally. As you can see it wraps into additional View which can be styled using ListFooterComponentStyle prop. It's not described for some reason in docs.

所以这是解决方案:

 <FlatList
      data={someData}
      keyExtractor={item => item.id}
      contentContainerStyle={{flexGrow: 1}}
      ListFooterComponentStyle={{flex:1, justifyContent: 'flex-end'}}
      ListFooterComponent={<Footer/>}
 ...
 />

UPD:使用 AtlasRider 的评论更新答案.

UPD: Update answer using AtlasRider's comment.

这篇关于即使内容不够，也会在列表底部呈现 FlatList 页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！