修复了使用 FlatList 进行本机反应的页脚

Question

关注 on fixed footer with a ScrollView, I'm trying to implement a fixed footer on the screen with a FlatList。我试图通过将平面列表放在视图中来使用提供的答案，但是 none 的项目被渲染了。有谁知道如何使用平面列表实现固定页脚作为组件的另一个主要元素吗？

Answer 1

FlatList 以 ListFooterComponent

的形式提供页脚支持

尝试将类似的内容添加到您的平面列表

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

希望对您有所帮助！

Answer 2

使用这个 flex solution 我设法用几个嵌套视图做到了：

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

Answer 3

和上面的答案类似，不过我觉得这个也行。

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

Answer 4

完成汤姆的解决方案并避免屏幕底部出现gap/space。

使用整数作为 flex 值

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

修复了使用 FlatList 进行本机反应的页脚

Fixed footer in react native with FlatList

react-native

react-native-flatlist