Урок 12

Итоги курса

Курс о компонентах и стилях в React Native.

Что ты узнал

  • StyleSheet — стили через объекты
  • Flexbox — column по умолчанию, gap
  • Image — размеры обязательны, expo-image
  • Кастомные компоненты — пропсы, StyleProp
  • Safe Area — SafeAreaView, useWindowDimensions
  • Темизация — useColorScheme, контекст
  • Анимации — Animated и Reanimated
  • Навигация в компонентах — useNavigation, useFocusEffect
  • Оптимизация — memo, useCallback, FlatList
  • Доступность — accessibilityLabel, роль, состояние
  • UI-библиотеки — Paper, Tamagui, NativeWind

Ключевые идеи

Стили — объекты, не CSS. StyleSheet.create для оптимизации и валидации.

Flexbox всегда. flexDirection: 'column' по умолчанию.

Safe Area обязательна. Без неё контент уйдёт под «челку».

Тема — через контекст. useColorScheme + useMemo для стилей.

Reanimated для анимаций. Работает на UI-потоке.

memo и useCallback для оптимизации. Особенно в списках.

Доступность — не опция. accessibilityLabel для всех интерактивных элементов.

Частые ошибки

  • Забыть размеры у <Image>
  • Использовать onChange вместо onChangeText
  • Путать flexDirection: 'row' (в вебе по умолчанию) и 'column' (в RN)
  • Забыть SafeAreaView
  • Inline-функции в FlatList
  • Игнорировать useMemo для стилей
  • Забыть accessibilityLabel
  • Не тестировать на реальном устройстве

Что дальше

  • Навигация — React Navigation подробно
  • Данные — API, TanStack Query, офлайн
  • Мобильная специфика — камера, уведомления, публикация

Полезные ссылки

  • React Native: reactnative.dev
  • Expo: docs.expo.dev
  • Reanimated: docs.swmansion.com/react-native-reanimated
  • NativeWind: nativewind.dev
  • Icons: icons.expo.fyi

Заключение

Компоненты и стили — база мобильного приложения. В React Native нет CSS, но есть Flexbox и объекты. Освоив StyleSheet, SafeAreaView, темизацию и оптимизацию, ты можешь строить красивые и быстрые интерфейсы. Помни: тестируй на реальном устройстве — симулятор не покажет всей картины.