嵌套导航器

了解如何在 Expo Router 中嵌套导航器。

导航 UI 元素（链接、选项卡、堆栈）将来可能会从 Expo Router 库中移出。

嵌套导航器允许在另一个导航器的屏幕内渲染一个导航器。本指南是 反应导航：嵌套导航器 对 Expo Router 的扩展。它提供了使用 Expo Router 时嵌套导航器如何工作的示例。

¥Nesting navigators allow rendering a navigator inside the screen of another navigator. This guide is an extension of React Navigation: Nesting navigators to Expo Router. It provides an example of how nesting navigators work when using Expo Router.

示例

¥Example

考虑以下用作示例的文件结构：

¥Consider the following file structure which is used as an example:

在上面的例子中，app/home/feed.tsx 匹配 /home/feed，app/home/messages.tsx 匹配 /home/messages。

¥In the above example, app/home/feed.tsx matches /home/feed, and app/home/messages.tsx matches /home/messages.

import { Stack } from 'expo-router';

export default Stack;

下面的 app/home/_layout.tsx 和 app/index.tsx 都嵌套在 app/_layout.tsx 布局中，因此它将被渲染为堆栈。

¥Both app/home/_layout.tsx and app/index.tsx below are nested in the app/_layout.tsx layout so that it will be rendered as a stack.

import { Tabs } from 'expo-router';

export default Tabs;

import { Link } from 'expo-router';

export default function Root() {
  return <Link href="/home/messages">Navigate to nested route</Link>;
}

下面的 app/home/feed.tsx 和 app/home/messages.tsx 都嵌套在 home/_layout.tsx 布局中，因此它将被渲染为选项卡。

¥Both app/home/feed.tsx and app/home/messages.tsx below are nested in the home/_layout.tsx layout, so it will be rendered as a tab.

import { View, Text } from 'react-native';

export default function Feed() {
  return (
    <View>
      <Text>Feed screen</Text>
    </View>
  );
}

import { View, Text } from 'react-native';

export default function Messages() {
  return (
    <View>
      <Text>Messages screen</Text>
    </View>
  );
}

导航到嵌套导航器中的屏幕

¥Navigate to a screen in a nested navigator

在 React Navigation 中，可以通过在参数中传递屏幕名称来控制导航到特定的嵌套屏幕。这将渲染指定的嵌套屏幕，而不是该嵌套导航器的初始屏幕。

¥In React Navigation, navigating to a specific nested screen can be controlled by passing the screen name in params. This renders the specified nested screen instead of the initial screen for that nested navigator.

例如，你想要从 root 导航器内的初始屏幕导航到 settings（嵌套导航器）内名为 media 的屏幕。在 React Navigation 中，这是按以下示例所示完成的：

¥For example, from the initial screen inside the root navigator, you want to navigate to a screen called media inside settings (a nested navigator). In React Navigation, this is done as shown in the example below:

navigation.navigate('root', {
  screen: 'settings',
  params: {
    screen: 'media',
  },
});

在 Expo Router 中，你可以使用 router.push() 来达到相同的结果。无需在参数中显式传递屏幕名称。

¥In Expo Router, you can use router.push() to achieve the same result. There is no need to pass the screen name in the params explicitly.

router.push('/root/settings/media');