html - React Native : 'top' property behaving as expected, 但 '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) 为什么第二张图中红点在黑色方 block 上方？

2) 由于红点是黑色方 block 的唯一 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>