结合绝对位置的React Native中的奇怪保证金行为

问题描述

我试图将View元素放置在其本机容器中具有position: "absolute"属性的react native中，但是正值和负值似乎不一致。让我通过示例向您展示：

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",height: 100,marginTop: 200 }}></View>
            </View>
            <View style={{ position: "absolute" }}>
                <View style={{ backgroundColor: "red",marginTop: -200 }}></View>
            </View>
        </View>
    );
}

产生如下输出：

因此，我在另一个具有position: "absolute"属性的View中打包了三个View元素。第一个（蓝色）没有边距，因此它恰好在中间，第二个（黄色）具有正的上边距200，第三个（红色）具有负的上边距200。为什么红色很奇怪矩形比黄色更远。

marginTop: 200和marginTop: -150似乎具有相同的效果（方向相反）。这是什么问题？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

margin react-native