Expo Router 中嵌套导航器的问题

Question

我遇到了与 Expo Router 中导航相关的问题。

如上面的屏幕截图所示，我按照以下方式配置了我的路由器。我在 app/_layout.tsx 中定义了

Stack Navigator

，在 app/(tabs)/_layout.tsx 中定义了

Tabs Navigator

，并在每个选项卡（主页/个人资料）中定义了单独的 Stack Navigator，以在同一选项卡中显示多个屏幕。

问题发生在这里：

（

router

是useRouter钩子返回的对象）

1. 从

   router.push

   路由器到

   /

   路由器执行

   /home

   。
2. 从

   router.push

   路由器到

   /home

   路由器执行

   /welcome

   。
3. 为了返回主页选项卡，请在

   router.push

   路由器上执行

   /home

   。

执行第三步后，它没有转到

/home

，而是导航回

/

。

通过各种测试，我发现问题是由嵌套在Tabs Navigator中的Stack Navigator引起的。当我从

_layout.tsx

和

(tabs)/home

中删除

(tabs)/profile

文件时，问题就消失了。

但是，我需要在 (tabs)/home,profile/_layout.tsx 文件中定义

Stack Navigator

，因为我需要在每个选项卡中显示多个屏幕。

我该怎么做才能使这项工作按预期进行？

我很想解决这个问题。如果您能帮助我，我将非常感激。

Answer 1

我也有类似的问题。我的初始结构的初始路线位于

index.tsx

，但我想在其中嵌套一个堆栈导航器，所以我将布局更改为

/index/...

。这导致了与您所描述的类似的导航问题。

我通过使用

useNavigation

中的

expo-router

解决了这个问题，并按照 React Navigation 中的 文档导航到嵌套导航器中的屏幕。通过记录导航状态来了解路线的名称和路径也有助于导航到正确的路线名称。

import { useNavigation } from 'expo-router';

...

const navigation = useNavigation()

...
console.log(JSON.stringify(navigation.getState()))

navigation.navigate("index", { screen: "index" })