响应导航，从嵌套导航器中导航

Question

我有一个导航器(X)，它容纳一个屏幕，让我们称之为N，还有另一个导航器，Y。我需要从导航器Y中的屏幕到根导航器中的N屏幕。我将如何使用react导航6来完成此操作？

根路由器的代码：

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

家庭路由器代码(导航器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>

配置文件路由器代码(导航器Y)：

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

我需要从navigator Y中的navigator Y屏幕导航到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中，如果嵌套导航器无法处理它，则父导航器将尝试处理它。

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

2.问题的解决

首先，所有嵌套导航器都应该有一个NavigationContainer，这意味着Y导航器应该如下所示：

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

在此之后，由于MainAccountPage被用作屏幕，您可以从props中的获得navigation对象。您可以这样导航(在需要的地方放置行)：

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