Раскладка с Flexbox

Расположение элементов на экране в React Native задаётся только через Flexbox — ту же модель, что и в CSS. Grid и float нет. Если вы знакомы с Flexbox в вебе, нужно запомнить лишь несколько отличий.

Отличия от веба

Главное: каждый View уже flex-контейнер, а элементы по умолчанию идут сверху вниз.

Заполнить экран: flex 1

Корневой View экрана обычно получает flex: 1 — «занять всё свободное место»:

// app/index.tsx
import { StyleSheet, Text, View } from 'react-native';
 
export default function Index() {
  return (
    <View style={styles.screen}>
      <Text>Мои задачи</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

Белый фон займёт весь экран, а надпись встанет точно по центру. Без flex: 1 контейнер был бы высотой с текст, и justifyContent ничего бы не сдвинул.

Строка: элементы в ряд

Для строки задачи нужен ряд: отметка слева, название справа.

// components/TaskRow.tsx
import { StyleSheet, Text, View } from 'react-native';
 
export default function TaskRow({ title }: { title: string }) {
  return (
    <View style={styles.row}>
      <View style={styles.check} />
      <Text style={styles.title}>{title}</Text>
      <Text>Удалить</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    padding: 12,
  },
  check: { width: 24, height: 24, borderWidth: 2, borderRadius: 12 },
  title: { flex: 1, fontSize: 18 },
});

Выведите <TaskRow title="Купить хлеб" /> в app/index.tsx. Слева появится кружок, затем название, а «Удалить» прижмётся к правому краю: flex: 1 у названия забирает всю оставшуюся ширину. gap задаёт отступ между элементами.

Основные свойства

Частая ошибка

Ждать, что justifyContent: 'space-between' разнесёт элементы по горизонтали, забыв flexDirection: 'row'. По умолчанию направление — колонка, поэтому элементы разойдутся вверх и вниз. Сначала задайте направление, затем выравнивание.