如何将3个视图与Expo垂直对齐？

Question

我无法正确地垂直对齐三个视图。我在网络上尝试了所有示例，但我不知道解决方案是什么。

我有三个视图，第一个在顶部，并包含一个 第二个必须填充第一个视图和最后一个视图（位于底部）之间的空间。

底视图是一个菜单。

我的风格是：

const styles = StyleSheet.create({
container: {
  flex: 1,  
  backgroundColor: '#fff',
  flexDirection:"column",
  alignItems: 'center',
 },
top : {
  flexDirection : 'row',
  marginTop:30,

 },
center :{
  marginTop : 10,
 }
bottom :{
  flexDirection : 'row',  
   marginTop : 10,
},

});

顶视图没问题。 第二个视图占据顶部菜单和屏幕末端之间的空间。 底部视图不可见。

我怎么了？

谢谢。