Урок 12

Итоги курса

Курс о навигации в React Native.

Что ты узнал

  • Что такое навигация — стек экранов, отличие от веба
  • Установка — React Navigation, SafeAreaProvider, NavigationContainer
  • Stack Navigator — переходы, параметры, хедер
  • Bottom Tab — нижние вкладки, иконки, бейджи
  • Drawer — боковое меню, кастомный drawerContent
  • Вложенные навигаторы — стек в табе, drawer со стеком
  • Параметры и типизация — RootStackParamList, NativeStackScreenProps
  • Deep Linking — linking, prefixes, Universal Links
  • Хедеры — options, headerRight, headerLargeTitle
  • Модалки — presentation: 'modal', bottom sheet
  • Авторизация — два стека, Auth Context, SecureStore

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

Навигация — стек, а не URL. Back работает как в iOS: возврат на предыдущий экран.

React Navigation — стандарт. Expo Router — альтернатива, но React Navigation даёт полный контроль.

Типизация обязательна. RootStackParamList спасает от опечаток и ошибок с параметрами.

Вложенные навигаторы — норма. Стек внутри таба, drawer со стеком — стандартные паттерны.

Deep Linking для роста. Ссылки из email, пушей, рекламы — обязательны для продукта.

Авторизация — два стека. user определяет, что показывать. Навигатор переключается автоматически.

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

  • Забыть NavigationContainer
  • Не типизировать ParamList
  • Путать navigate и push
  • Передавать функции в параметры
  • Забыть react-native-reanimated/plugin в babel
  • Не использовать SecureStore для токенов
  • Забыть SafeAreaProvider
  • Не тестировать deep links

Что дальше

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

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

  • React Navigation: reactnavigation.org
  • Expo Router: docs.expo.dev/router/introduction
  • Deep Linking: reactnavigation.org/docs/deep-linking
  • Bottom Sheet: gorhom.github.io/react-native-bottom-sheet

Заключение

Навигация — каркас мобильного приложения. React Navigation даёт стек, табы, drawer и вложенные навигаторы. Типизация параметров спасает от ошибок. Deep linking открывает приложение из внешних ссылок. Авторизация через два стека — стандарт индустрии. Освоив навигацию, ты можешь строить любое приложение.