Flexbox в React Native

Разбираем главный инструмент раскладки в RN — Flexbox — и его ключевое отличие от веба.

В React Native Flexbox — основной способ раскладки, и по умолчанию элементы выстраиваются сверху вниз (flexDirection: 'column'), а не слева направо, как в вебе.

Главное отличие от веба

В CSS у Flexbox по умолчанию flex-direction: row — элементы идут в строку. В React Native всё наоборот: по умолчанию flexDirection: 'column', элементы выстраиваются в столбик. Это логично для вертикальных мобильных экранов, но новичков часто сбивает с толку.

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

// без указания direction элементы идут СВЕРХУ ВНИЗ
function ColumnLayout() {
  return (
    <View>
      <Text>Первый</Text>
      <Text>Второй</Text>
    </View>
  );
}

Чтобы расположить элементы в ряд, направление указывают явно:

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

function RowLayout() {
  return (
    <View style={{ flexDirection: "row" }}>
      <Text>Слева</Text>
      <Text>Справа</Text>
    </View>
  );
}

Три главных свойства

Помните: главная ось зависит от flexDirection. При column главная ось вертикальная, поэтому justifyContent двигает элементы вверх/вниз, а alignItems — влево/вправо.

Центрирование экрана

Классический приём — растянуть контейнер на весь экран через flex: 1 и отцентрировать содержимое:

import { View, Text, StyleSheet } from "react-native";

function Centered() {
  return (
    <View style={styles.center}>
      <Text>Я по центру экрана</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

flex: 1 — занять всё доступное место

flex: 1 означает «займи всё свободное пространство родителя». Если у двух соседних View поставить flex: 1, они поделят место поровну. Это основной способ создавать резиновые раскладки без фиксированных размеров.

import { View } from "react-native";

function SplitScreen() {
  return (
    <View style={{ flex: 1, flexDirection: "row" }}>
      <View style={{ flex: 1, backgroundColor: "tomato" }} />
      <View style={{ flex: 2, backgroundColor: "gold" }} />
    </View>
  );
}

Здесь правая часть в два раза шире левой: flex: 2 против flex: 1.

Итог

• Flexbox — основной способ раскладки; по умолчанию направление column (не row, как в вебе).
• justifyContent и alignItems выравнивают вдоль и поперёк главной оси.
• flex: 1 растягивает элемент на всё доступное место; через разные значения flex делят пространство пропорционально.