Question

我正在尝试将两个（或更多）组件彼此垂直放置，并在包装该内容的视图中垂直和水平居中（即，外部视图的高度应为内部组件的最大高度；同上）为宽度）。

首先，绝对定位看起来是个好主意，所有组件都必须居中放置。但是然后我不知道如何获取外部视图来包装内容。

<View style={{ backgroundColor: 'black', alignItems: 'center', justifyContent: 'center'}}>
    <View style={{position: 'absolute', width: 60, height: 60, backgroundColor: 'blue'}} />
    <View style={{position: 'absolute', width: 70, height: 50, backgroundColor: 'red'}} />
    <View style={{position: 'absolute', width: 50, height: 70, backgroundColor: 'green'}} />
</View>

在此示例中，我们看不到外部视图的任何黑色背景（其大小可能为0x0），而我期望在三个彩色矩形后面有一个70x70的黑色正方形。

Answer 1

如果最外层View的位置是绝对的，则不会自动调整其子级。

您必须将最外层View的位置设为绝对，并根据其子级以及屏幕的宽度和高度来计算其大小和位置。

另一种选择是创建一个背景视图，作为具有相对位置的子视图：

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}> 
  <View style={{position: 'relative', width: 70, height: 70, backgroundColor: 'black'}} />
  <View style={{position: 'absolute', width: 60, height: 60, backgroundColor: 'blue'}} />
  <View style={{position: 'absolute', width: 70, height: 50, backgroundColor: 'red'}} />
  <View style={{position: 'absolute', width: 50, height: 70, backgroundColor: 'green'}} />
</View>

在React Native中

1 个答案: