Отладка стилей

Отладка стилей в React Native часто вызывает трудности у новичков, потому что визуальные проблемы (например, элемент не отображается или занимает неверный размер) могут быть следствием неправильной иерархии компонентов, ограничений родителя или особенностей движка layout (Flexbox).

Инспектор компонентов

Основной инструмент для отладки стилей — Component Inspector, встроенный в Dev Menu:

  1. Вызовите Dev Menu (Cmd+D на iOS, Cmd+M на Android).
  2. Выберите Show Inspector.
  3. Нажмите на любой элемент на экране.

После этого появится оверлей с информацией:

  • Имя компонента (например, View, Text, TouchableOpacity).
  • Применённые стили (в том числе унаследованные от темы или библиотеки).
  • Фактические размеры (ширина, высота) и позиция на экране.
  • Отступы: padding, margin, границы.

Это позволяет быстро понять, почему элемент выглядит не так, как ожидалось.

Типичные причины проблем со стилями

  • Родитель без размеров: если родительский View не имеет явной ширины или высоты, дочерние элементы могут не отобразиться.
  • Неправильное использование Flexbox: например, забытый flexDirection: 'row' при горизонтальном расположении.
  • Абсолютное позиционирование без координат: элемент может уйти за пределы экрана.
  • Цвет фона совпадает с фоном родителя: элемент есть, но его не видно.
  • overflow: 'hidden' у родителя: обрезает дочерние элементы, выходящие за границы.

Практический приём: временная визуализация

Чтобы увидеть границы компонентов, можно временно добавить разные цвета фона:

<View style={{ backgroundColor: 'red', padding: 10 }}>
  <View style={{ backgroundColor: 'blue', height: 50 }} />
</View>

Это помогает понять, как компоненты занимают пространство.

Дополнительно в Flipper

Если подключён Flipper с React DevTools, можно просматривать стили компонента во вкладке React — при выборе элемента отображаются все применённые свойства из style.

Отладка стилей требует системного подхода: начинайте с проверки иерархии, затем анализируйте размеры и направление flex-контейнеров. Инспектор значительно ускоряет этот процесс.