html - React Native:“top”属性的行为符合预期，但“bottom”却没有

我的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仅在第三幅图像中表现出预期效果？

最佳答案

在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>

关于html - React Native:“top”属性的行为符合预期，但“bottom”却没有，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59615612/