2

我有一个 navigator ( X) ，它拥有一个屏幕，我们称之为N，还有另一个 navigator ，Y. 我需要从 navigatorY中的屏幕移动N到根导航器中的屏幕。我将如何使用反应导航 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>

我需要从MainAccountPage屏幕导航navigator Y到Post.navigator X

4

1 回答 1

1

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

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

之后，asMainAccountPage用作屏幕，您navigation从props. 您可以通过这种方式导航（将行放在您需要的位置）：

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

这是一个总体概述。假设我们有那些嵌套的导航器：

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'), inside Feedscreen 时，嵌套的 tab navigator 会处理它，但是如果你调用navigate('Settings')，父 stack navigator 会处理它。

于 2022-02-28T05:59:29.760 回答