Stack-навигатор

createVirentiaStackNavigator строит навигатор @react-navigation/stack из ваших представлений роутов и возвращает компонент { Navigator }. Навигатор следует за роутером: то представление роута, которое является самым глубоким из сейчас открытых, выводится на передний план стека.

Настройка — провайдеры, history и представления роутов — общая со вторым навигатором и описана в обзоре React Native.

import { createVirentiaStackNavigator } from "@virentia/router-react-native";
import { createRouteView } from "@virentia/router-react";
import { router, homeRoute, profileRoute } from "./router";
import { HomeScreen, ProfileScreen } from "./screens";

const { Navigator } = createVirentiaStackNavigator({
  router,
  routes: [
    createRouteView({ route: homeRoute, view: HomeScreen }),
    createRouteView({ route: profileRoute, view: ProfileScreen }),
  ],
  initialRouteName: "/home",
  screenOptions: {
    headerShown: false,
  },
});

Конфигурация

interface VirentiaStackNavigatorConfig {
  router: Router;
  routes: RouteView[];
  initialRouteName?: string;
  screenOptions?: StackNavigationOptions;
}

Опция	Тип	Описание
router	Router	Роутер, которому принадлежат эти представления
routes	RouteView[]	Представления роутов в порядке регистрации экранов
initialRouteName	string	Необязательное имя первого экрана (см. Имена экранов)
screenOptions	StackNavigationOptions	Необязательные опции, применяемые к навигатору и каждому экрану

Как он следует за роутером

Навигатор подписывается на открытые представления для своих routes. Когда набор открытых роутов меняется, он вызывает navigate на экране для самого глубокого открытого представления. Так как дочерний роут открывает и своего родителя, вложенный дочерний экран предпочитается своему открытому родителю — открытие /profile/friends показывает экран друзей, а повторное открытие /profile возвращает к экрану профиля.

Если у открытого роута нет представления в routes, текущий экран остается наверху — навигатор никогда не показывает пустоту. Это позволяет открывать роуты, которые обрабатываются в другом месте (другой навигатор, модалка), не нарушая стек.

Виртуальные роуты как экраны

Виртуальные роуты, созданные через createVirtualRoute, поддерживаются как экраны без пути в стиле модалок. Они получают сгенерированное имя экрана (Route{index}), а их преобразованные параметры читаются из модели роута так же, как у любого другого экрана:

const { Navigator } = createVirentiaStackNavigator({
  router,
  routes: [
    createRouteView({ route: homeRoute, view: HomeScreen }),
    createRouteView({ route: detailsRoute, view: DetailsScreen }), // virtual route
  ],
  initialRouteName: "/home",
});

Вызов detailsRoute.open({ id: "modal-1" }) пушит его экран; экран читает useUnit(detailsRoute.params) для получения преобразованного payload.