嵌套导航

编辑

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

导航 UI 元素（链接、标签、堆栈）将来可能会从 Expo Router 库中移除。

在 Expo Router 中使用堆栈导航器

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

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

示例

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

app

_layout.tsx

index.tsx

home

_layout.tsx

feed.tsx

messages.tsx

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

app/_layout.tsx

import { Stack } from 'expo-router';

export default Stack;

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

app/home/_layout.tsx

import { Tabs } from 'expo-router';

export default Tabs;

app/index.tsx

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 布局中，因此它将作为选项卡渲染。

app/home/feed.tsx

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

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

app/home/messages.tsx

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

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

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

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

例如，从 root 导航器中的初始屏幕，您想导航到 settings（一个嵌套导航器）中的名为 media 的屏幕。在 React Navigation 中，可以如下所示完成：

React Navigation

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

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

Expo Router

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