React Native 中奇怪的边距行为与绝对位置相结合

Question

我试图在 React Native 中定位在其父容器中具有

position: "absolute"

属性的 View 元素，但正值和负值似乎不一致。让我给你举个例子：

function Home(props) {
    return (
        <View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
            <View style={{ position: "absolute" }}>
                <View style={{ backgroundColor: "blue", width: 100, height: 100 }}></View>
            </View>
            <View style={{ position: "absolute" }}>
                <View style={{ backgroundColor: "yellow", width: 100, height: 100, marginTop: 200 }}></View>
            </View>
            <View style={{ position: "absolute" }}>
                <View style={{ backgroundColor: "red", width: 100, height: 100, marginTop: -200 }}></View>
            </View>
        </View>
    );
}

产生如下所示的输出：

因此，我将三个 View 元素打包在另一个具有

position: "absolute"

属性的 View 中。第一个（蓝色）没有边距，因此它正好位于中间，第二个（黄色）的正上边距为 200，第三个（红色）的负上边距为 200。为什么红色看起来很奇怪矩形比黄色更远。

A

marginTop: 200

和

marginTop: -150

似乎具有相同的效果（方向相反）。这里有什么问题吗？

Answer 1

这样做的原因是因为您使用的是

marginTop

而不是

top

。这里边距和绝对定位的问题在于，您实际上是在更改彩色框的父级的大小，即使它看起来不像，而不是将彩色框从中心移动一定的量。

所以您可能正在寻找类似的东西：

function Home(props) {
  return (
    <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
      <View style={{position: 'absolute'}}>
        <View style={{backgroundColor: 'blue', width: 100, height: 100}}></View>
      </View>
      <View style={{position: 'absolute'}}>
        <View
          style={{
            backgroundColor: 'yellow',
            width: 100,
            height: 100,
            top: 200,
          }}></View>
      </View>
      <View style={{position: 'absolute'}}>
        <View
          style={{
            backgroundColor: 'red',
            width: 100,
            height: 100,
            top: -200,
          }}></View>
      </View>
    </View>
  );
}

以不同的方式解释它：您并没有真正移动彩色框，而是修改彩色框顶部的空间，从而将框向下推。

---

如果向不同框周围的视图添加

borderWidth

，您可以看到向框视图添加边距对父视图的影响。