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，我会得到：

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

我想知道的：

1) 为什么第二张图片中的红点会出现在黑色方块的上方？

2) 既然红点是黑色方块的唯一孩子，为什么添加position: absolute会改变什么？

3) 为什么top 在所有三个图像中的行为都符合预期，而bottom 只有在第三个图像中的行为符合预期？

Answer 1

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

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

    <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 可以指不同的地方，具体取决于您将position 设置为相对还是绝对