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) Почему красный точка go над черным квадратом на втором изображении?

2) Поскольку красная точка является единственным потомком черного квадрата, почему добавление position: absolute что-то меняет?

3 ) Почему top ведет себя так, как ожидается на всех трех изображениях, а bottom ведет себя так, как ожидается, только на третьем?

Answer 1

1) Потому что без указания position: absolute все команды положения относятся к тому месту, в котором элемент находится изначально.

2) Изменяется способ интерпретации команд положений (вверху, слева, справа, снизу) относительно родительский элемент

3) Поскольку top относится к одному и тому же месту, независимо от того, на что установлено значение position, но buttom может относиться к другому месту в зависимости от того, установлено ли для position значение относительный или абсолютный

Answer 2

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