布局路由

了解如何定义共享 UI 元素，例如选项卡栏和标题。

默认情况下，路由会填满整个屏幕。 在它们之间移动是一个没有动画的整页过渡。 在原生应用中，用户希望标题和选项卡栏等共享元素能够在页面之间保留。 这些是使用 布局路由 创建的。

创建布局路由

要为目录创建布局路由，请在目录中创建名为 \layout.js 的文件，并导出 React 组件为 default。

import { Slot } from 'expo-router';

export default function HomeLayout() {
  return <Slot />;
}

从上面的例子来看，投币口 将渲染当前的子路由，就像 React 中的 children prop 一样。 该组件可以与其他组件一起封装以创建布局。

import { Slot } from 'expo-router';

export default function HomeLayout() {
  return (
    <>
      <Header />
      <Slot />
      <Footer />
    </>
  );
}

Expo Router 支持为给定目录添加单个布局路由。 如果要使用多个布局路由，请添加多个目录：

import { Tabs } from 'expo-router';

export default function Layout() {
  return <Tabs />;
}

import { Stack } from 'expo-router';

export default function Layout() {
  return <Stack />;
}

如果你想要多个布局路由而不修改 URL，可以使用 groups。

群组

你可以使用组语法 () 来防止分段显示在 URL 中。

• app/root/home.js 匹配 /root/home
• app/(root)/home.js 匹配 /home

这对于添加布局而不向 URL 添加其他段非常有用。 你可以根据需要添加任意数量的组。

组也适合组织应用的各个部分。 在下面的示例中，app/(app) 是主应用所在的位置，app/(aux) 是辅助页面所在的位置。 这对于添加你想要外部链接但不需要成为主应用一部分的页面非常有用。

原生布局

React Native 的最大优势之一是能够使用原生 UI 组件。 Expo Router 提供了一些嵌入式原生布局，你可以使用它们轻松实现熟悉的原生行为。 要在某些平台上的真正原生布局和其他平台上的自定义布局之间进行更改，请参阅 特定于平台的模块。

import { Stack } from 'expo-router';

export default function HomeLayout() {
    return (
        <Stack screenOptions={{ ... }} />
    )
}

了解有关内置布局的更多信息：

高级

Expo Router 支持额外的约定和系统来构建原生应用用户期望的复杂 UI。 使用 Expo Router 不需要这些，但如果你需要的话可以使用。