Реагируйте на естественный изгиб ребенка, который, по-видимому, влияет

Question

Я испытываю некоторые трудности при использовании flex для разметки в React Native. Я уменьшил поведение, с которым сталкиваюсь, до следующей проблемы.

У меня есть один контейнер, который заполняет доступное пространство, так как для него установлено значение flex, равное 1. Затем у меня есть дочерний элемент в этом контейнере, который должен заполнить контейнер , поэтому я установил его flex на 1. Я также хочу, чтобы контейнер имел отступ сверху. Поэтому я ожидаю, что ребенок заполнит всех родителей, кроме верхних 20%. Тем не менее, я вижу, что в верхней и нижней части контейнера вокруг дочернего элемента имеется одинаковое заполнение (как если бы я установил paddingVertical вместо paddingTop).

Кто-нибудь может объяснить, почему это ведет себя как оно делает? Я также заинтригован поведением, которое я видел, создавая закуску, чтобы проиллюстрировать эту проблему. На симуляторах iOS и Android я испытываю поведение, которое мне кажется ошибочным, тогда как веб-представление работает, как я и ожидал, с пробелом вверху.

Спасибо!

Пример кода Snack

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.child}>
        <Text>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'green',
    paddingTop: '20%'
  },
  child: {
    flex:1,
    backgroundColor:'red'
  },
});

Android - «сломанное» поведение

Интернет - «ожидаемое» поведение