如何使嵌套视图在本机反应中占据屏幕的全部宽度和高度？答案

【问题标题】：How to make a nested view take the full width and height of the screen in react native?如何使嵌套视图在本机反应中占据屏幕的全部宽度和高度？
【发布时间】：2018-06-29 11:07:05
【问题描述】：

这是一个解释视图嵌套的图像

一个组件有一些containerView，里面可以是一系列嵌套的视图，在someChildView里面，我们有一个cardView。当有人按下卡片视图时，我想让它动画到 containerView 的全宽和全高。

我无法将其设置为绝对值，因为它似乎只能达到其父视图的边界。我想要一个开关，将 cardView 从它在图像中的样子改变为全屏。

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

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

有什么建议吗？

【问题讨论】：

标签： javascript ios react-native styling

【解决方案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>

当您想将其显示为完整视图时，在 Modal 中显示 cardView。 Modal 会覆盖整个屏幕。

【讨论】：

这会模拟一个模态出现，我不希望这样。我想让特定的 cardView 对象扩展它的顶部、左侧、右侧、底部为 0 和绝对位置，这对于 containerView 来说是绝对的。这样我就可以将特定卡片设置为全屏动画，然后返回到它的原始位置。
Modal 在 React Native 中还不错。它是全屏的。它还有一个动画。