如何将基于 flatList 下面的组件移动到屏幕底部？

Question

各位。我打算制作一个屏幕（顶部：flatList，底部：一些组件），但该组件应位于屏幕底部。这样试了好几次都不行

我累了：底部组件样式：

   position: 'absolute',
   bottom: 0,
   padding: 20,

但对我不起作用，这个组件只是隐藏了。我不确定为什么会这样。

请帮帮我... 谢谢

Answer 1

你是这个意思吗？

<View style={{ flex: 1 }}>
   <FlatList 
      style={{ flex: 1, .... }}
      ...
   />
   <SomeComponent style={{height:80, width:'100%'}}>
      ...
   </SomeComponent>
</View>

Answer 2

你可以这样做。平面列表是可滚动的，您可以根据需要将视图放在上方或下方。

//数据=['aa','bb','cc']

 <View style={{ flex: 1 }}>
      <View style={{ backgroundColor: 'blue', height: 100, width: '100%' }} />
      <FlatList
        style={{ flexGrow: 0 }}
        renderItem={({ item }) => (
          <Text style={{ height: 100 }}>{item}</Text>
        )}
        data={data}
      />
      <View
        style={{
          backgroundColor: 'red',
          height: 100,
          width: '100%',
          marginTop: 'auto',
        }}
      />
    </View>

说明 flexGrow: 0 将确保平面列表仅使用可用的 space 否则它将增长并占据全屏。 marginTop: 'auto' 会将视图移动到底部，这对 marginLeft 和 marginRight 也有效，这在将项目移动到角落时也有帮助。所以底部的视图将占用 height:100 和全宽并移动到底部，平面列表将占用其余部分。

输出如下

如何将基于 flatList 下面的组件移动到屏幕底部？

How can I move the component which is based on below flatList to the bottom of the screen?

react-native

react-native-flatlist

react-native-stylesheet