Растягивание экрана в React Native¶

Растягивание экрана в React — это адаптация пользовательского интерфейса мобильного приложения под различные размеры экранов, ориентации и плотности пикселей. В экосистеме React Native, ориентированной на создание кроссплатформенных приложений для iOS и Android, задача обеспечения корректного отображения на десятках различных устройств решается сочетанием системного API Dimensions, компонента useWindowDimensions, flex-раскладки и относительных единиц измерения.

¶Основные инструменты

¶Dimensions

Стандартный модуль Dimensions из React Native предоставляет доступ к размерам экрана устройства:

```javascript import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window'); ```

Dimensions.get('window') возвращает размеры окна приложения (без учёта системных панелей), а Dimensions.get('screen') — физические размеры экрана. Метод Dimensions.addEventListener('change', handler) позволяет отслеживать изменения размеров, например при повороте устройства.

¶useWindowDimensions

Хук useWindowDimensions из React Native является предпочтительным способом получения размеров в функциональных компонентах. Он автоматически перезапускает рендер при изменении размеров окна, что избавляет от ручной подписки на события:

```javascript import { useWindowDimensions } from 'react-native';

function MyComponent() { const { width, height } = useWindowDimensions(); return <View style={{ width: width * 0.5 }} />; } ```

¶Подходы к адаптации

¶Flexbox-раскладка

React Native использует flexbox по умолчанию, что упрощает создание адаптивных интерфейсов. Основные свойства:

• flex: 1 — элемент занимает всё доступное пространство;
• flexGrow, flexShrink, flexBasis — тонкая настройка распределения пространства;
• justifyContent и alignItems — выравнивание по главной и поперечной осям.

Приоритет отдаётся относительным размерам вместо фиксированных значений в пикселях.

¶Процентные значения

Стили React Native поддерживают проценты для ширины и высоты:

``javascript <View style={{ width: '80%', height: '50%' }} /> ``

Проценты считаются от размеров родительского контейнера, что делает раскладку гибкой.

¶Масштабирование через коэффициент

Популярен подход с вычислением масштабирующего коэффициента относительно базового экрана (например, iPhone 8 с шириной 375 пунктов):

``javascript const scale = width / 375; const scaledSize = (baseSize) => baseSize * scale; ``

Этот приём позволяет пропорционально масштабировать шрифты, отступы и размеры элементов. Для этого часто создают собственные утилиты или переопределяют глобальную функцию normalize.

¶Библиотеки и утилиты

¶react-native-size-matter

Библиотека react-native-size-matter предоставляет функции moderateScale, scale, verticalScale и scaleFont для удобного масштабирования значений относительно эталонного устройства:

```javascript import { s, vs, ms } from 'react-native-size-matters';

<View style={{ width: s(100), height: vs(50), padding: ms(12) }} /> ```

¶react-native-responsive-screen

Пакет react-native-responsive-screen предлагает функции widthPercentageToDP и heightPercentageToDP для задания размеров в процентах от экрана:

```javascript import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

<View style={{ width: wp('80%'), height: hp('30%') }} /> ```

¶Ориентация экрана

По умолчанию React Native поддерживает обе ориентации. Ограничение ориентации задаётся в манифестах платформ:

• Android — атрибут android:screenOrientation в AndroidManifest.xml;
• iOS — свойство supportedInterfaceOrientations в Info.plist.

Для программного определения текущей ориентации используется соотношение width / height.

¶Практические рекомендации

1. Использовать useWindowDimensions вместо прямого вызова Dimensions.get в функциональных компонентах.
2. Задавать базовые размеры в пунктах (points), а не пикселях — React Native автоматически конвертирует единицы с учётом плотности экрана.
3. Избегать фиксированных высот у контейнеров с текстом — перенос строк на разных устройствах может ломать раскладку.
4. Тестировать на реальных устройствах с различными диагоналями, а не только в симуляторах.
5. Для сложных интерфейсов использовать библиотеки вроде react-native-size-matters вместо ручных вычислений.

¶Источники

• Документация React Native: Dimensions API
• Документация React Native: useWindowDimensions
• react-native-size-matter — GitHub-репозиторий
• react-native-responsive-screen — GitHub-репозиторий