布局路由

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

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

¥By default, routes fill the entire screen. Moving between them is a full-page transition with no animation. In native apps, users expect shared elements like headers and tab bars to persist between pages. These are created using layout routes.

创建布局路由

¥Create a layout route

要为目录创建布局路由，请在目录中创建一个名为 _layout.tsx 的文件，并将 React 组件导出为 default。

¥To create a layout route for a directory, create a file named _layout.tsx in the directory, and export a React component as default.

import { Slot } from 'expo-router';

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

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

¥From the above example, Slot will render the current child route, think of this like the children prop in React. This component can be wrapped with other components to create a layout.

import { Slot } from 'expo-router';

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

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

¥Expo Router supports adding a single layout route for a given directory. If you want to use multiple layout routes, add multiple directories:

import { Tabs } from 'expo-router';

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

import { Stack } from 'expo-router';

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

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

¥If you want multiple layout routes without modifying the URL, you can use groups.

群组

¥Groups

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

¥You can prevent a segment from showing in the URL by using the group syntax ().

• app/root/home.tsx 与 /root/home 匹配

  ¥app/root/home.tsx matches /root/home

• app/(root)/home.tsx 与 /home 匹配

  ¥app/(root)/home.tsx matches /home

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

¥This is useful for adding layouts without adding additional segments to the URL. You can add as many groups as you want.

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

¥Groups are also good for organizing sections of the app. In the following example, we have app/(app) which is where the main app lives, and app/(aux) which is where auxiliary pages live. This is useful for adding pages which you want to link to externally, but don't need to be part of the main app.

原生布局

¥Native layouts

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

¥One of the best advantages to React Native is being able to use native UI components. Expo Router provides a few drop-in native layouts that you can use to easily achieve familiar native behavior. To change between truly-native layouts on certain platforms and custom layouts on others, see Platform-specific modules.

import { Stack } from 'expo-router';

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

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

¥Learn more about the built-in layouts:

高级

¥Advanced

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

¥Expo Router supports additional conventions and systems to build complex UIs that native app users expect. These are not required to use Expo Router but are available if you need them.