如何使嵌套视图以原生的方式获取屏幕的整个宽度和高度？

Question

这是一张图片，用于解释视图

的嵌套

组件有一些containerView，里面可以是一系列嵌套视图，而在someChildView内，我们有一个cardView。当有人按下卡片视图时，我希望它能够为containerView的全宽和高度设置动画。

我无法将其设置为绝对值，因为它似乎只能达到它的父视图的范围。我希望有一个切换，可以将cardView从图像中的样子改变为全屏。

以下是某个任意组件的简化渲染函数示例：

<containerView style={{ flex: 1 }}>
  <someChildView style={{ flex: 0.5 }}>
    <cardView style={this.widthAndHeightToggle()} />
    <cardView style={this.widthAndHeightToggle()} />
  </someChildView>
</containerView>

有什么建议吗？

Answer 1

一个好方法是在containerView中使用另一个cardView并在切换时使用它。

<containerView style={{ flex: 1 }}>
  <Modal>
    <cardViewToggled />
  </Modal>
  <someChildView style={{ flex: 0.5 }}>
    <cardView style={this.widthAndHeightToggle()} />
    <cardView style={this.widthAndHeightToggle()} />
  </someChildView>
</containerView>

只要您想要将其显示为完整视图，就可以在模态中显示cardView。 Modal将覆盖整个屏幕。