Разработка навигации со стеком экранов (Navigation Stack) мобильного приложения

Разработка навигации со стеком экранов (Navigation Stack) мобильного приложения

Навигация — то, что пользователь чувствует каждую секунду работы с приложением. Кривой стек экранов: анимация дёргается, кнопка «Назад» ведёт не туда, deep link открывает пустой экран — и рейтинг падает. Правильная навигация незаметна. Неправильная — раздражает.

iOS: UINavigationController и SwiftUI NavigationStack

В UIKit навигация строится на UINavigationController. Типичная ошибка: push из любого места через UIApplication.shared.windows.first?.rootViewController. Это ломается на iPad, в modal-контекстах и при работе с несколькими сценами. Правильно: Coordinator-паттерн, где каждый coordinator владеет своим UINavigationController и знает о своём участке графа навигации.

В SwiftUI с iOS 16+ появился NavigationStack с NavigationPath:

@State private var path = NavigationPath()

NavigationStack(path: $path) {
    HomeView()
        .navigationDestination(for: Route.self) { route in
            switch route {
            case .profile(let id): ProfileView(userId: id)
            case .settings: SettingsView()
            }
        }
}

NavigationPath — типобезопасный стек, который можно сохранить, восстановить и передать через deep link. До iOS 16 — NavigationView, который имеет баги с двойными push на iPad.

Deep Links на iOS

Universal Links требуют apple-app-site-association на сервере и настройки Associated Domains в Xcode. URL Schemes (myapp://profile/123) проще, но перехватываются любым приложением. В SceneDelegate.scene(_:openURLContexts:) парсим URL → конвертируем в Route → пушим в нужный coordinator.

Android: Jetpack Navigation Component

Fragment backstack вручную — источник багов: двойные транзакции, неправильное сохранение состояния при возврате. Jetpack Navigation Component (androidx.navigation) заменяет ручное управление на декларативный Navigation Graph:

<navigation>
    <fragment android:id="@+id/homeFragment" ...>
        <action android:id="@+id/action_home_to_profile"
            app:destination="@id/profileFragment"/>
    </fragment>
    <fragment android:id="@+id/profileFragment" ...>
        <argument android:name="userId" app:argType="string"/>
    </fragment>
</navigation>

Безопасная передача аргументов через Safe Args: генерируемые классы HomeFragmentDirections.actionHomeToProfile(userId) вместо Bundle.putString. Несовпадение типов — ошибка компиляции, не рантайм-краш.

С Compose — NavHost:

NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen(onProfileClick = { id ->
        navController.navigate("profile/$id")
    }) }
    composable("profile/{userId}") { backStack ->
        val userId = backStack.arguments?.getString("userId")!!
        ProfileScreen(userId = userId)
    }
}

Deep links через <deepLink app:uri="myapp://profile/{userId}"/> в Navigation Graph или через NavDeepLinkBuilder.

React Native: React Navigation

React Navigation — стандарт для React Native. Stack Navigator, Tab Navigator, Drawer Navigator комбинируются:

const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<TabParamList>();

type RootStackParamList = {
  Main: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

function AppNavigator() {
  return (
    <NavigationContainer linking={linkingConfig}>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={TabNavigator} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

createNativeStackNavigator использует нативные анимации (UINavigationController на iOS, Fragment transactions на Android) — это быстрее JS-анимаций createStackNavigator.

Deep links через linking prop: { screens: { Profile: 'profile/:userId' } }.

Flutter: GoRouter

GoRouter — официально рекомендованный пакет для Flutter-навигации с поддержкой web URL и deep links:

final router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (ctx, state) => HomeScreen()),
    GoRoute(
      path: '/profile/:userId',
      builder: (ctx, state) => ProfileScreen(userId: state.pathParameters['userId']!),
    ),
  ],
);

context.go('/profile/123') — навигация с заменой стека. context.push('/profile/123') — push поверх текущего стека. Работает одинаково на iOS, Android и Flutter Web.

Типичные проблемы при настройке навигации

Потеря состояния при возврате. На Android при popBackStack Fragment пересоздаётся. Решение: FragmentContainerView с saveState = true или ViewModel выше уровня навигации.

Дублирование нажатий. Быстрый двойной тап на кнопку делает двойной push. На iOS: isMovingToParent проверка. На Android: currentDestination?.id == R.id.target перед navigate. В React Navigation: navigation.navigate идемпотентен для одного экрана, navigation.push — нет.

Неправильные анимации на Android. Кастомные enterAnim/exitAnim через Navigation Component — работают. Через FragmentTransaction.setCustomAnimations напрямую с Navigation — ломаются при popBackStack.

Что включает настройка навигации

Проектирование навигационного графа под функциональные требования. Реализация deep link схемы с парсингом параметров. Настройка tab/drawer/modal навигации. Сохранение состояния стека при переключении вкладок. Тестирование навигационных сценариев.

Сроки

Базовая навигация (stack + tabs): 2–3 дня. Сложная навигация с deep links, auth flow, nested navigators: 5–8 дней. Стоимость — после анализа требований.