嵌套导航器

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

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

导航 UI 元素（Link、Tabs、Stack）未来可能会从 Expo Router 库中移出。

在 Expo Router 中使用 Stack 导航器

在屏幕之间导航、在屏幕之间传递参数、创建动态路由，以及配置屏幕标题和动画。

嵌套导航器允许在另一个导航器的屏幕内部渲染一个导航器。本指南是 React Navigation: 嵌套导航器 在 Expo Router 中的扩展。它提供了一个示例，展示在使用 Expo Router 时嵌套导航器是如何工作的。

示例

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

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

import { Stack } from 'expo-router';

export default Stack;

下面的 src/app/home/_layout.tsx 和 src/app/index.tsx 都嵌套在 src/app/_layout.tsx 布局中，因此它会作为一个堆栈来渲染。

import { Tabs } from 'expo-router';

export default Tabs;

import { Link } from 'expo-router';

export default function Root() {
  return <Link href="/home/messages">导航到嵌套路由</Link>;
}

下面的 src/app/home/feed.tsx 和 src/app/home/messages.tsx 都嵌套在 home/_layout.tsx 布局中，因此它会作为一个标签页来渲染。

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

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

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

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

Stack 内部的原生 Tabs

使用原生 Tabs 时，你可以在每个标签页内部嵌套一个 <Stack /> 布局，以支持标题栏和屏幕推送。完整示例请参见 在 tabs 中使用 Stacks。

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

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

例如，从 root 导航器中的初始屏幕出发，你想导航到 settings（一个嵌套导航器）中的名为 media 的屏幕。在 React Navigation 中，可以像下面示例这样实现：

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

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

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