Question

我试图在我们的FlatList上实现一些不稳定的功能。我们想要的是，如果FlatList延伸到页面之外，页脚应该正常运行 - 即在用户滚动到足以显示它之前离开屏幕。

但是，如果只有少数项目，并且FlatList没有超出页面底部，我希望我的页脚显示在底部，而不是在列表后面。我试图绘制一些ASCII艺术来更好地表达我的意思：

错：

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

我想要的是什么：

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

任何人都知道如何做到这一点？重要的是，如果你需要滚动查看一个单元格，页脚不会位于列表上，但仍然保留在所有单元格之后。

Answer 1

如果有人发现这个并且正在寻找答案，那么我就是这样做的：

worker.GetType() == typeof(Worker)

这将强制<ScrollView style={styles.flatListSectionLayout} contentContainerStyle={{ flexGrow: 1 }}> <FlatList style={{ flex: 1 }} scrollEnabled={false} ... /> <Footer /> </ScrollView>的内容容器增长以填充所有可用空间（ScrollView），然后强制contentContainerStyle={{ flexGrow: 1 }}占用尽可能多的空间尽可能剩余的空间（FlatList样式道具中的flex: 1。）

Answer 2

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

用body.message.forEach((item: { [k: string]: number }) => { console.log(Object.keys(item)[0]); console.log(Object.values(item)[0]); });实现的解决方案在更多项目上表现不佳，因为FlatList需要计算所有子高度。

人应该是这样的：

scrollEnabled={false}

我为你们测试放了世博小吃：https://snack.expo.io/@victorwads/flatlist-with-grow-footer

您可以在零食上放更多物品，以测试更多物品的行为：

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

如果列表不在页面外延伸，则在底部渲染FlatList页脚

2 个答案: