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

wmvff8tz 于 6个月前发布在 React

关注(0)|答案(1)|浏览(69)

我尝试在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的负上边距。这似乎很奇怪为什么红色矩形比黄色矩形更远。
一个marginTop: 200和marginTop: -150似乎有相同的效果（在相反的方向上）。这里有什么问题吗？

react-native

来源：https://stackoverflow.com/questions/63978375/weird-margin-behavior-in-react-native-in-combination-with-absolute-position

1条答案

按热度按时间

kd3sttzy1#

这是因为你使用的是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，你可以看到在盒子视图中添加边距对父视图的影响。

赞(0）回复(0）举报 6个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答