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

Question

我试图在其父容器中定位具有 position: "absolute" 属性的 react native 中的 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>
    );
}

产生如下所示的输出：

所以我将三个视图元素打包在另一个具有 position: "absolute" 属性的视图中。第一个（蓝色）没有边距，所以正好在中间，第二个（黄色）的顶部边距为 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>
  );
}

换句话说：您并没有真正移动彩色框，而是在修改彩色框顶部的 space，从而将框向下推。

如果您在不同框周围的视图中添加 borderWidth，您可以看到向框视图添加边距对父视图的影响。

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

Weird Margin behavior in React Native in combination with absolute position

margin

react-native