Стили и StyleSheet

CSS-файлов в React Native нет. Стиль — это JavaScript-объект, который передают в проп style. Имена свойств почти как в CSS, только в camelCase: backgroundColor вместо background-color.

Объект StyleSheet

Стили принято собирать внизу файла экрана через StyleSheet.create:

// app/index.tsx
import { StyleSheet, Text, View } from 'react-native';
 
export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Мои задачи</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#222',
  },
});

На экране появится серая полоса с крупным жирным заголовком. StyleSheet.create возвращает тот же объект, но редактор подсказывает имена свойств и сразу отмечает опечатки.

Числа без единиц

Размеры пишут числами без px. Это независимые от плотности экрана пиксели: 16 выглядит одинаково на простом и на очень чётком экране. Проценты задают строкой: width: '50%'.

Сокращений вроде border или margin: 0 16px нет — каждое свойство задаётся отдельно.

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

В style можно передать массив. Свойства из правых элементов перекрывают левые, а false и null пропускаются:

// components/TaskItem.tsx
import { StyleSheet, Text } from 'react-native';
 
export default function TaskItem({ title, done }: { title: string; done: boolean }) {
  return <Text style={[styles.task, done && styles.done]}>{title}</Text>;
}
 
const styles = StyleSheet.create({
  task: { fontSize: 18, paddingVertical: 8 },
  done: { color: '#999', textDecorationLine: 'line-through' },
});

Создайте папку components в корне проекта и этот файл в ней. Выведите компонент на экране: <TaskItem title="Купить хлеб" done /> — строка станет серой и зачёркнутой, а с done={false} — обычной.

Наследования почти нет

В вебе цвет шрифта, заданный у body, наследуют все элементы. В React Native стили не наследуются: color у View не повлияет на Text внутри. Исключение — вложенный Text, который берёт шрифт и цвет у внешнего Text.

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

Писать единицы или CSS-имена:

// app/index.tsx
// Неправильно:
const styles = StyleSheet.create({
  title: { 'font-size': '24px' },
});

Такой стиль будет проигнорирован, а TypeScript покажет ошибку. Пишите fontSize: 24 — camelCase и число.