reactjs - 如果列表未超出页面，则在底部渲染 FlatList 页脚

Question

我正在尝试在 FlatList 上实现一些奇怪的功能。我们想要的是，如果 FlatList 延伸到页面之外，页脚应该表现正常 - 即离开屏幕，直到用户滚动足够多以显示它。

但是，如果只有几个项目，并且 FlatList 没有延伸到页面底部之外，我希望页脚显示在底部，而不是紧接在列表之后。我尝试画一些 ASCII 艺术来更好地表达我的意思:

错误:

---------------
| cell1        |
|--------------|
| cell2        |
|--------------|
| footer       |
|              |
|              |
|              |
----------------

我想要什么:

---------------
| cell1        |
|--------------|
| cell2        |
|--------------|
|              |
|              |
|              |
| footer       |
----------------

有人知道该怎么做吗？重要的是，如果您需要滚动查看某个单元格，则页脚不会位于列表上方，而是仍保留在所有单元格后面。

Answer 1

我今天遇到了同样的问题，但我使用了更好的解决方案。

使用 scrollEnabled={false} 实现的解决方案在处理更多项目时效果不佳，因为 FlatList 需要计算所有子项高度。

文应该像这样:

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

我放了世博零食给你们测试:https://snack.expo.io/@victorwads/flatlist-with-grow-footer

您可以在零食上放置更多元素来测试更多元素的行为:

<FlatList
   data={['', '', '' ,'' ,'' ,'' ,'' ,'' ,'' ,'']}
   ...
/>