react-native - 如何将基于以下 flatList 的组件移动到屏幕底部？

Question

大家。我将制作一个屏幕（顶部：flatList，底部：某个组件），但组件应位于屏幕底部。我像这样尝试了几次，但我做不到。

我累了：底部组件样式：

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

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

请帮助我...谢谢

Answer 1

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

//数据=['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>

Explanation flexGrow: 0 将确保平面列表将仅使用可用空间，否则它将增长并占据全屏。marginTop: 'auto' 会将视图移动到底部，这也适用于 marginLeft 和 marginRight ，这在将项目移动到角落时会有所帮助。因此，底部的视图将采用 height:100 和全宽并移动到底部，而 flatlist 将占据其余部分。

输出将如下所示

Answer 2

你的意思是这样的吗？

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