Адаптация под размеры экрана

Делаем интерфейс пригодным для экранов разного размера — от маленького телефона до планшета.

Проблема разных экранов

Телефоны бывают очень разными: узкие и широкие, с «чёлкой» и без. Если жёстко задать ширину карточки в 350 пикселей, на маленьком экране она вылезет за край. Поэтому фиксированные размеры по возможности заменяют на гибкие.

Проценты вместо пикселей

Ширину и высоту можно задавать в процентах от родителя — как в CSS. Это самый простой способ адаптации.

import { View } from "react-native";

function HalfWidth() {
  return (
    <View style={{ width: "80%", height: 100, backgroundColor: "skyblue" }} />
  );
}

Теперь блок всегда занимает 80% ширины контейнера, независимо от размера телефона.

Dimensions — узнать размер экрана

Иногда нужно знать точные размеры экрана в пикселях — например, чтобы сделать квадрат во всю ширину. Для этого есть API Dimensions.

import { Dimensions, View } from "react-native";

const { width } = Dimensions.get("window");

function Square() {
  // квадрат со стороной во всю ширину экрана
  return <View style={{ width: width, height: width, backgroundColor: "tomato" }} />;
}

Лучше использовать проценты и Flexbox, а к Dimensions прибегать, когда без точного числа не обойтись.

Расчёт размеров — обычный JS

Размеры и отступы вычисляются обычным JavaScript. Посмотрим на простом примере, как посчитать ширину трёх карточек в ряд с учётом отступов (этот код можно запустить):

const screenWidth = 360; // ширина экрана в пикселях
const gap = 8;           // отступ между карточками
const columns = 3;

// общая ширина всех отступов между колонками
const totalGap = gap * (columns - 1);
const cardWidth = (screenWidth - totalGap) / columns;

console.log("Ширина одной карточки:", cardWidth);

Вывод:

Ширина одной карточки: 114.66666666666667

SafeAreaView — не залезать под чёлку

У современных телефонов сверху «чёлка» или вырез под камеру, а снизу — системная полоса. Если контент попадёт под них, его не будет видно. SafeAreaView автоматически добавляет нужные отступы, чтобы интерфейс оставался в безопасной зоне.

import { SafeAreaView, Text } from "react-native";

function Screen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Text>Контент не залезет под чёлку</Text>
    </SafeAreaView>
  );
}

Принципы адаптивной вёрстки

Предпочитайте Flexbox и flex: 1 жёстким размерам.
Ширину задавайте в процентах, где можно.
Dimensions — для точных расчётов, когда без числа никак.
Оборачивайте экраны в SafeAreaView.

Итог

Жёсткие пиксели — враг адаптивности; используйте проценты и Flexbox.
Dimensions.get('window') даёт реальные размеры экрана для точных расчётов.
SafeAreaView уберегает контент от чёлки и системных полос.