固定页脚的React原生与FlatList

2ledvvac 于 2023-04-22 发布在 React

关注(0)|答案(5)|浏览(128)

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

react-native

来源：https://stackoverflow.com/questions/49224471/fixed-footer-in-react-native-with-flatlist

5条答案

按热度按时间

lsmepo6l1#

使用这个flex解决方案，我设法用几个嵌套的视图来实现它：

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

赞(0）回复(0）举报 2023-04-22

jckbn6z72#

这与上面的答案类似，但我认为这也是可行的。

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

赞(0）回复(0）举报 2023-04-22

bbuxkriu3#

FlatList附带了ListFooterComponent的页脚支持
尝试将类似的内容添加到平面列表中
ListFooterComponent={() => <Text>Footer content</Text>}
希望这有帮助！

赞(0）回复(0）举报 2023-04-22

xggvc2p64#

要完成汤姆的解决方案，并避免在屏幕底部的间隙/空间。
flex值使用整数

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

赞(0）回复(0）举报 2023-04-22

nvbavucw5#

这对我来说也是有效的，让按钮保持在底部，同时允许FlatList正常工作：

<View style={{
  display: 'flex',
}}>
  <View style={{flex: 1}}>
    <FlatList
      data={data}
      renderItem={() => <Item/>}
    />
  </View>
  <View style={{ marginTop: 'auto'}}>
    <Btn/>
  </View>
</View>

marginTop: auto将按钮推到屏幕底部。

赞(0）回复(0）举报 2023-04-22

我来回答

固定页脚的React原生与FlatList

5条答案

相关问题

热门标签

最新问答