Высота и ширина¶
Высота и ширина компонента определяют его размер на экране.
Фиксированные размеры¶
Общий способ задать размеры компонента — это добавить фиксированные width и height к стилю. Все размеры в React Native не имеют единицы измерения и представляют собой пиксели, не зависящие от плотности.
Задание размеров таким способом характерно для компонентов, размер которых всегда должен быть фиксирован в количестве точек, а не рассчитываться в зависимости от размера экрана.
Не существует универсального соответствия между точками и физическими единицами измерения. Это означает, что компонент с фиксированными размерами может иметь разный физический размер на разных устройствах и при разных размерах экрана. Однако для большинства случаев использования эта разница незаметна.
Гибкие размеры¶
Используйте flex в стиле компонента, чтобы компонент динамически расширялся и сжимался в зависимости от доступного пространства. Обычно вы используете flex: 1, что говорит компоненту заполнить все доступное пространство, равномерно распределяя его между другими компонентами с тем же родителем. Чем больше значение flex, тем больше места будет занимать компонент по сравнению со своими братьями и сестрами.
Компонент может расширяться, чтобы заполнить доступное пространство, только если его родитель имеет размеры больше, чем 0. Если родитель не имеет фиксированных width и height или flex, то родитель будет иметь размеры 0 и дочерние компоненты flex не будут видны.
После того как вы сможете управлять размерами компонента, следующим шагом будет изучение того, как расположить его на экране.
Процентные размеры¶
Если вам нужно заполнить определенную часть экрана, но вы не хотите использовать flex макет, вы можете использовать процентные значения в стиле компонента. Подобно flex-размерам, процентные размеры требуют родителя с определенным размером.