React Native：'top' 属性 表现符合预期，但 'bottom' 并非如此

Question

我的 React Native 应用程序中有以下代码：

<View
  style={{
    width: 50,
    height: 50,
    borderWidth: 1,
  }}
>
  <View style={{
    width: 5,
    height: 5,
    backgroundColor: 'red',
    top: 10,
    left: 10
  }}></View>
</View>

正如预期的那样，结果是：

但是，如果我将 top 换成 bottom，我会得到：

如果我将 child 元素更改为 position: absolute，它会按预期工作：

我想知道的：

1) 为什么第二张图中红点在黑色方块上方？

2) 由于红点是黑色方块中唯一的 child，为什么添加 position: absolute 会改变什么？

3) 为什么 top 在所有三个图像中都表现得像预期的那样，但 bottom 只在第三个图像中表现得像预期的那样？

Answer 1

在React-Native中，每个布局元素默认都是相对定位的，所以相对于初始位置底部的10px布局在容器之外，这是正确的行为。

如果您想将点定位在容器的边界上，请将 child 的位置设置为绝对位置。

    <View
      style={{
        width: 50,
        height: 50,
        borderWidth: 1,
        position: 'relative' // by default anyway
      }}
    >
      <View
        style={{
          width: 5,
          height: 5,
          backgroundColor: "red",
          bottom: 10,
          left: 10,
          position: 'absolute'
        }}
      />
    </View>

Answer 2

1) 因为没有指定 position: absolute 所有位置命令都是相对于元素最初所在的位置。

2) 它改变了位置命令（顶部、左侧、右侧、底部）相对于父元素的解释方式

3) 因为 top 指的是同一个地方，而不管 position 设置的是什么，但是 buttom 可能指的是不同的地方，这取决于你是否有 [=12] =] 设置为相对或绝对