Стилизация через StyleSheet

Учимся стилизовать компоненты без CSS-файлов — через объекты JavaScript и StyleSheet.

StyleSheet — способ описывать стили в React Native как объекты JavaScript; отдельных CSS-файлов здесь нет.

Стили — это объекты, а не CSS

В вебе стили живут в .css-файлах. В React Native стиль — это обычный JavaScript-объект, который передаётся в проп style. Никаких классов и селекторов.

import { Text } from "react-native";

function Title() {
  return (
    <Text style={{ fontSize: 24, fontWeight: "bold", color: "tomato" }}>
      Привет
    </Text>
  );
}

Главные отличия от CSS

CSS	React Native
`background-color`	`backgroundColor` (camelCase)
`font-size: 16px;`	`fontSize: 16` (число, без px)
классы и каскад	объекты, без каскада
значения-строки	числа для размеров

Запомните три правила: свойства пишутся camelCase (marginTop, а не margin-top), размеры — это числа без единиц (это логические пиксели, dp), а каскада и наследования стилей почти нет.

StyleSheet.create — правильный способ

Писать стили прямо в JSX можно, но при росте проекта это засоряет разметку. Принятый подход — собрать стили в StyleSheet.create внизу файла и ссылаться по имени.

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

function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Заголовок карточки</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: "#f2f2f2",
  },
  title: {
    fontSize: 18,
    fontWeight: "600",
  },
});

Это удобнее: разметка остаётся чистой, стили переиспользуются, а опечатки в названиях свойств легче заметить.

Несколько стилей сразу

Можно передать массив стилей — они применятся по порядку, последний перекрывает предыдущие. Так удобно комбинировать базовый стиль и условный.

import { Text } from "react-native";

function Badge({ active }) {
  return (
    <Text style={[styles.badge, active && styles.badgeActive]}>
      Метка
    </Text>
  );
}

Логика стилей — это обычный JS

Поскольку стиль — это просто объект, всё считается обычным JavaScript. Покажем это на простом примере (без RN-компонентов), который можно запустить:

const base = { fontSize: 16, color: "black" };
const active = { color: "tomato", fontWeight: "bold" };

// объединяем два стиля, как делает RN с массивом стилей
const result = Object.assign({}, base, active);
console.log(result);

Вывод:

{ fontSize: 16, color: 'tomato', fontWeight: 'bold' }

Видно, что свойство color из второго объекта перекрыло первое — ровно так же массив стилей в RN накладывает их по порядку.

Итог

Стили — объекты JS, а не CSS-файлы; свойства в camelCase.
Размеры — числа без px; каскада и наследования почти нет.
Используйте StyleSheet.create и массивы стилей для переиспользования и комбинирования.