如何在反应导航中的不同嵌套堆栈之间导航

Question

目标

使用反应导航,从导航器中的屏幕导航到不同导航器中的屏幕.

更多详情

如果我有以下导航器结构:

• 父导航器
  • 嵌套导航器1
    • 屏幕A.
    • 屏幕B.
  • 嵌套导航器2
    • 屏幕C.
    • 屏幕D.

如何从嵌套导航器2下的屏幕D转到嵌套导航器1下的屏幕A？现在,如果我尝试navigation.navigate从屏幕D屏幕A,将会出现一个错误,表示它不知道屏幕A,只有屏幕C和D.

我知道这已被要求以各种形式在本网站上的各个地方以及GitHub上(https://github.com/react-navigation/react-navigation/issues/983,https://github.com/react-导航/ react-navigation/issues/335#issuecomment-280686611)但是对于那些基本的东西,缺乏明确的答案并滚动浏览数百个GitHub评论搜索解决方案并不是很好.

也许这个问题可以编写如何为每个遇到这个非常常见问题的人做这件事.

Answer 1

在 React Navigation 5 中，通过将屏幕作为第二个参数传入，这变得更加容易：

navigation.navigate('Nested Navigator 2', { screen: 'screen D' });

如果您有深层嵌套的屏幕，您还可以包含其他级别：

navigation.navigate('Nested Navigator 2', {
    screen: 'Nested Navigator 3', params: {
        screen: 'screen E'
    }
});

Answer 2

您可以使用speficy子操作的第三个参数navigate.

例如,如果要从嵌套导航器2下的屏幕D转到嵌套导航器1下的屏幕A:

this.props.navigation.navigate('NestedNavigator1', {}, NavigationActions.navigate({ routeName: 'screenB' }))

此外,如果您使用的是嵌套导航器,请务必查看v2文档中的常见错误部分.

Answer 3

在 React 导航 v5/v6 中

导航到堆栈上的特定屏幕

navigation.navigate('Home', {
   screen: 'Profile',
   params: {userID: 1}
 }
)

如果我们筑巢更多怎么办？

考虑这个结构：

NAVIGATOR:
  *StackA
    *ScreenC
    *ScreenD
  *StackB
    *ScreenI
    *StackE
      *ScreenF
      *StackG
        *ScreenJ
        *ScreenH

我们希望从 StackA 中的 ScreenC 一直到 StackB 中的 ScreenH。我们实际上可以将参数链接在一起以访问特定的屏幕。

navigation.navigate('StackB',{
   screen: 'StackE',
   params: {
      screen: 'StackG',
      params: {
         screen: 'ScreenH'
      }
   }
  }
)

了解更多信息

Answer 4

React Navigation v3：

Navigation.navigate现在将一个对象作为参数。您设置堆栈名称，然后按以下步骤导航到该堆栈中的路由...

navigation.navigate(NavigationActions.navigate({
    routeName: 'YOUR_STACK',
    action: NavigationActions.navigate({ routeName: 'YOUR_STACK-subRoute' })
}))

创建您的堆栈时，“ YOUR_STACK”就是您要调用的堆栈...

  YOUR_STACK: createStackNavigator({ subRoute: ... })

Answer 5

在 React Navigation v5 上，你有所有的解释：

https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator

路线定义

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Root" component={Root} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

操作说明

navigation.navigate('Root', { screen: 'Settings' });

Answer 6

在React Navigation v5 中，您可以执行以下操作：

navigation.navigate('Root', {
  screen: 'Settings',
  params: {
    screen: 'Sound',
    params: {
      screen: 'Media',
    },
  },
});

在上述情况下，您要导航到媒体屏幕，它位于嵌套在声音屏幕内的导航器中，它位于嵌套在设置屏幕内的导航器中。

Answer 7

反应导航 v6

文档

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.navigate('Home', { screen: 'Messages' });