修复了与 FlatList 反应原生的页脚答案

【问题标题】：Fixed footer in react native with FlatList修复了与 FlatList 反应原生的页脚
【发布时间】：2018-03-11 19:59:08
【问题描述】：

在使用 ScrollView 在固定页脚上使用 this question 之后，我正在尝试使用 FlatList 在屏幕上实现固定页脚。我试图使用通过将平面列表放在视图中提供的答案，但是没有呈现任何项目。有谁知道如何使用平面列表作为组件的另一个主要元素来实现固定页脚？

【问题讨论】：

【解决方案1】：

使用这个flex solution，我设法通过几个嵌套视图来做到这一点：

<View style={{flex: 1}}>
  <View style={{flex: 0.9}}>
    <FlatList/>
  </View>
  <View style={{flex: 0.1}}/>
</View>

【讨论】：

【解决方案2】：

FlatList 以ListFooterComponent 的形式提供页脚支持

尝试将这样的内容添加到您的平面列表中

ListFooterComponent={() => <Text>Footer content</Text>}

希望这会有所帮助！

【讨论】：

感谢您的回答。据我了解facebook.github.io/react-native/docs/… 的文档，这是指定在所有项的底部而不是在屏幕底部呈现的内容...
ListFooterComponent 只渲染一次，但它没有 sticky 选项。

【解决方案3】：

与上面的答案类似，但我认为这也有效。

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    <FlatList/>
  </View>
  <View />
</View>

【讨论】：

【解决方案4】：

完成汤姆的解决方案并避免屏幕底部的间隙/空间。

对flex 值使用整数

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    <FlatList/>
  </View>
  <View style={{flex: 0}}/>
</View>

【讨论】：