React Navigation，导航出嵌套导航器

Question

我有一个导航器 (X)，它有一个屏幕，我们称之为 N，还有另一个导航器 Y。我需要从导航器 Y 中的屏幕移动到根导航器中的屏幕 N。我将如何使用 React Navigation 6 来执行此操作？

根路由器代码：

<NavigationContainer>
  <Tabs.Navigator>
    <Tabs.Screen component={HomeRouter} name="HomeTab" />
  </Tabs.Navigator>
</NavigationContainer>

家庭路由器代码（Navigator X）：

<NavigationContainer independent={true}>
  <Stack.Navigator initialRouteName={"Home"}>
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Post" component={Post} />
    <Stack.Screen name="Profile" component={Account} />
  </Stack.Navigator>
</NavigationContainer>

配置文件路由器代码（Navigator Y）：

<NavigationContainer independent={true} theme={MyTheme}>
  <Stack.Navigator>
    <Stack.Screen name="MainProfile" component={MainAccountPage} />
  </Stack.Navigator>
</NavigationContainer>

我需要从 navigator Y 中的 MainAccountPage 屏幕导航到 navigator X 中的 Post 屏幕。

Answer 1

1。总体概览

这是一个总体概述。假设我们有那些嵌套的导航器（注意只有一个 NavigationContainer）：

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

如果您在嵌套屏幕中调用 navigation.goBack()，它只会在您已经在嵌套导航器的第一个屏幕上时返回父导航器。 navigate 等其他操作类似，即导航将发生在嵌套的 navigator 中，如果嵌套的导航器无法处理它，那么父导航器将尝试处理它。

例如，在 Feed 屏幕内调用 navigate('Messages') 时，嵌套的选项卡导航器将处理它，但如果调用 navigate('Settings')，父级堆栈导航器将处理它。

2。问题解答

首先，您应该为所有嵌套导航器设置一个 NavigationContainer，这意味着 Y 导航器应该是这样的：

<Stack.Navigator>
  <Stack.Screen name="MainProfile" component={MainAccountPage} />
</Stack.Navigator>

之后，由于 MainAccountPage 被用作屏幕，您从 props 中的 React Navigation 获取 navigation 对象。你可以这样导航（把行放在你需要的地方）：

export default function MainAccountPage({navigation}){
  navigation.navigate("Post"); // how you navigate
  return <></>
}