Раскладки и Slot: обёртка без сегмента

// подложка: справочник, экраны Catalog, Workout, Card и маршрутизатор из прошлой статьи
type Params = Record<string, string>;
type Route = { file: string; parts: string[] };
type Found = { file: string; params: Params };
interface ListProps {
  open: (id: string) => void;
}
interface CardProps {
  id: string;
  back: () => void;
}
declare function Catalog(props: ListProps): React.ReactElement;
declare function Workout(props: ListProps): React.ReactElement;
declare function Card(props: CardProps): React.ReactElement;
declare function routesFrom(keys: string[], platform: string): Route[];
declare function match(routes: Route[], url: string): Found | null;
const { View, Text, Pressable, Platform } = ReactNative;

interface ScreenProps {
  params: Params;
  go: (url: string) => void;
}

// вкладки общие, но нарисовать их негде, кроме самих экранов
function Tabs({ go }: Pick<ScreenProps, "go">) {
  React.useEffect(() => {
    console.log("вкладки: на экране");
    return () => console.log("вкладки: ушли с экрана");
  }, []);
  return (
    <View style={{ flexDirection: "row", gap: 16 }}>
      <Pressable testID="tab-workout" onPress={() => go("/")}><Text>Тренировка</Text></Pressable>
      <Pressable testID="tab-catalog" onPress={() => go("/catalog")}><Text>Справочник</Text></Pressable>
    </View>
  );
}

const app: Record<string, (props: ScreenProps) => React.ReactElement> = {
  "./index.tsx": ({ go }) => <View><Tabs go={go} /><Workout open={(id) => go("/exercise/" + id)} /></View>,
  "./catalog.tsx": ({ go }) => <View><Tabs go={go} /><Catalog open={(id) => go("/exercise/" + id)} /></View>,
  "./exercise/[id].tsx": ({ params, go }) => <Card id={params.id} back={() => go("/")} />,
};
const routes = routesFrom(Object.keys(app), Platform.OS);

function Root() {
  const [url, setUrl] = React.useState("/");
  const found = match(routes, url);
  console.log(url, "→", found === null ? "не найден" : found.file);
  if (found === null) return <Text>Экран не найден</Text>;
  const Screen = app[found.file];
  return <Screen params={found.params} go={setUrl} />;
}

mount(<Root />);
setTimeout(() => fireEvent.press("tab-catalog"), 100);
setTimeout(() => fireEvent.press("row-bench"), 200);

// подложка: routesFrom и match из прошлой статьи
type Params = Record<string, string>;
type Route = { file: string; parts: string[] };
type Found = { file: string; params: Params };
declare function routesFrom(keys: string[], platform: string): Route[];
declare function match(routes: Route[], url: string): Found | null;

// вкладки нужны тренировке и справочнику, но не карточке — их файлы уехали в папку (tabs)
const keys = [
  "./_layout.tsx",
  "./(tabs)/_layout.tsx",
  "./(tabs)/index.tsx",
  "./(tabs)/catalog.tsx",
  "./exercise/[id].tsx",
];
const routes = routesFrom(keys, "ios");
console.log(routes.map((route) => "/" + route.parts.join("/")));
console.log(match(routes, "/catalog"));
console.log(match(routes, "/"));

const keys = [
  "./_layout.tsx",
  "./(tabs)/_layout.tsx",
  "./(tabs)/index.tsx",
  "./(tabs)/catalog.tsx",
  "./exercise/[id].tsx",
];
const GROUP = /^\(.+\)$/;

// адрес: папки-группы из пути выпадают
function toHref(key: string): string | null {
  const path = key.replace(/^\.\//, "").replace(/\.[jt]sx?$/, "");
  const name = path.split("/").pop()!;
  if (name.startsWith("_") || name.startsWith("+")) return null;
  const parts = path.split("/").filter((part) => !GROUP.test(part));
  return "/" + parts.join("/").replace(/(^|\/)index$/, "");
}

// цепочка: каждая папка на пути к файлу, группы тоже, если в ней лежит _layout
function layoutsOf(file: string, keys: string[]): string[] {
  const dirs = file.split("/").slice(0, -1);
  return dirs
    .map((_, i) => dirs.slice(0, i + 1).join("/") + "/_layout.tsx")
    .filter((layout) => keys.includes(layout));
}

for (const key of keys) {
  const href = toHref(key);
  if (href !== null) console.log(href, "=", [...layoutsOf(key, keys), key].join(" > "));
}

// expo-router 57.0.16 · build/views/Navigator.js, фрагмент
function SlotNavigator(props) {
    const contextKey = (0, Route_1.useContextKey)();
    // Allows adding Screen components as children to configure routes.
    const { screens, protectedScreens } = (0, withLayoutContext_1.useFilterScreenChildren)([], {
        contextKey,
    });
    const { state, descriptors, NavigationContent } = (0, native_1.useNavigationBuilder)(StackClient_1.StackRouter, {
        ...props,
        id: contextKey,
        children: (0, useScreens_1.useSortedScreens)(screens ?? [], protectedScreens),
    });
    return ((0, jsx_runtime_1.jsx)(NavigationContent, { children: descriptors[state.routes[state.index].key].render() }));
}

// подложка: справочник, экраны Catalog, Workout, Card, вкладки TabBar из первого примера
// и маршрутизатор этой статьи: у каждого маршрута есть цепочка раскладок layouts
type Params = Record<string, string>;
type Route = { file: string; parts: string[]; layouts: string[] };
type Found = { file: string; params: Params; layouts: string[] };
interface ListProps {
  open: (id: string) => void;
}
interface CardProps {
  id: string;
  back: () => void;
}
interface ScreenProps {
  params: Params;
  go: (url: string) => void;
}
declare function Catalog(props: ListProps): React.ReactElement;
declare function Workout(props: ListProps): React.ReactElement;
declare function Card(props: CardProps): React.ReactElement;
declare function TabBar(props: Pick<ScreenProps, "go">): React.ReactElement;
declare function routesFrom(keys: string[], platform: string): Route[];
declare function match(routes: Route[], url: string): Found | null;
const { View, Text, Platform } = ReactNative;

// раскладка не получает children: на место Slot встаёт следующее звено цепочки
const SlotContext = React.createContext<React.ReactNode>(null);
function Slot() {
  return React.useContext(SlotContext);
}

function TabsLayout({ go }: ScreenProps) {
  React.useEffect(() => {
    console.log("раскладка (tabs): на экране");
    return () => console.log("раскладка (tabs): ушла с экрана");
  }, []);
  return <View><TabBar go={go} /><Slot /></View>;
}

const app: Record<string, (props: ScreenProps) => React.ReactNode> = {
  "./_layout.tsx": () => <View style={{ gap: 8 }}><Text style={{ fontSize: 18 }}>Подход</Text><Slot /></View>,
  "./(tabs)/_layout.tsx": TabsLayout,
  "./(tabs)/index.tsx": ({ go }) => <Workout open={(id) => go("/exercise/" + id)} />,
  "./(tabs)/catalog.tsx": ({ go }) => <Catalog open={(id) => go("/exercise/" + id)} />,
  "./exercise/[id].tsx": ({ params, go }) => <Card id={params.id} back={() => go("/")} />,
};
const routes = routesFrom(Object.keys(app), Platform.OS);

function Root() {
  const [url, setUrl] = React.useState("/");
  const found = match(routes, url);
  console.log(url, "→", found === null ? "не найден" : found.file);
  if (found === null) return <Text>Экран не найден</Text>;
  const Screen = app[found.file];
  // стопку сворачиваем с конца, как в части IV: корневая раскладка — снаружи
  return found.layouts.reduceRight<React.ReactNode>((inner, file) => {
    const Layout = app[file];
    return <SlotContext.Provider value={inner}><Layout params={found.params} go={setUrl} /></SlotContext.Provider>;
  }, <Screen params={found.params} go={setUrl} />);
}

mount(<Root />);
setTimeout(() => fireEvent.press("tab-catalog"), 100);
setTimeout(() => fireEvent.press("row-bench"), 200);
setTimeout(() => fireEvent.press("back"), 300);

// apps/mobile/src/app/root-layout/root-layout.tsx — приложение автора, фрагмент;
// сам app/_layout.tsx — одна строка: export { default } from '@/app/root-layout/root-layout';
<Stack screenOptions={{ headerTintColor: colors.foreground }}>
  <Stack.Screen name="index" options={{ headerShown: false }} />
  <Stack.Screen name="(auth)/login" options={{ headerShown: false }} />
  <Stack.Screen name="(auth)/register" options={{ headerShown: false }} />
  <Stack.Screen name="(auth)/forgot-password" options={{ headerShown: false }} />
  <Stack.Screen name="(main)" options={{ headerShown: false }} />
  <Stack.Screen name="notes/[id]" options={{ title: 'Заметка' }} />
</Stack>

// apps/mobile/src/app/main-tabs-layout/main-tabs-layout.tsx — приложение автора,
// фрагмент без иконок вкладок; это тело app/(main)/_layout.tsx
if (hydrated && !token) return <Redirect href="/(auth)/login" />;

return (
  <Tabs screenOptions={{ headerShown: false, tabBarActiveTintColor: colors.primary }}>
    <Tabs.Screen name="index" options={{ title: 'Заметки' }} />
    <Tabs.Screen name="profile" options={{ title: 'Профиль' }} />
  </Tabs>
);

// expo-router 57.0.16 · build/fork/getStateFromPath-forks.js, фрагмент formatRegexPattern
    // Strip groups from the matcher
    if ((0, matchers_1.matchGroupName)(it) != null) {
        // Groups are optional segments
        // this enables us to match `/bar` and `/(foo)/bar` for the same route
        // NOTE(EvanBacon): Ignore this match in the regex to avoid capturing the group
        return `(?:${(0, escape_string_regexp_1.default)(it)}\\/)?`;
    }
    return (0, escape_string_regexp_1.default)(it) + `\\/`;