导航嵌套意味着在一个导航器的屏幕内渲染一个导航器。例如:

  1. function Home() {
  2. return (
  3. <Tab.Navigator>
  4. <Tab.Screen name="Feed" component={Feed} />
  5. <Tab.Screen name="Messages" component={Messages} />
  6. </Tab.Navigator>
  7. );
  8. }
  9. function App() {
  10. return (
  11. <NavigationContainer>
  12. <Stack.Navigator>
  13. <Stack.Screen
  14. name="Home"
  15. component={Home}
  16. options={{ headerShown: false }}
  17. />
  18. <Stack.Screen name="Profile" component={Profile} />
  19. <Stack.Screen name="Settings" component={Settings} />
  20. </Stack.Navigator>
  21. </NavigationContainer>
  22. );
  23. }

App中有一个导航器,这个导航器的Home组件上也有一个tab导航器。 所以就是一个tab导航器嵌套在stack 导航器中。

  • Stack.Navigator
    • Home (Tab.Navigator)
      • Feed (Screen)
      • Messages (Screen)
    • Profile (Screen)
    • Settings (Screen)

导航嵌套和组件嵌套的是非常相似的。为了实现你想要的功能,你需要嵌套多个导航器。

导航嵌套怎么影响行为?

使用导航嵌套是,有一下几点需要注意一下:

每一个导航器都有自己的历史记录

例如,当您在嵌套堆栈导航器的屏幕内按下后退按钮时,即使有另一个导航器作为父级,它也会返回到嵌套stack的前一个屏幕。

每一个导航器都有自己的选项

例如,title在嵌套在子导航器的屏幕中指定选项是不会影响父导航器中显示的标题。
如果你想实现这种功能,请参阅带有嵌套导航器的屏幕选项指南。如果您在stack导航器中呈现tab导航器并希望在stack导航器的标题中显示tab导航器内的活动屏幕的标题,这可能很有用。

每一个在导航器中的屏幕都有自己的params

例如,任何params传递到嵌套导航器中的屏幕的内容都位于该route屏幕的道具中,并且无法从父导航器或子导航器中的屏幕访问。
如果您需要从子屏幕访问父屏幕的参数,您可以使用React Context将参数公开给子屏幕。

如果无法处理,导航器操作有当前导航器处理

例如,如果您navigation.goBack()在嵌套屏幕中调用,那么只有您已经在的导航器的第一个屏幕上时,它才会返回父导航器。其他动作,例如navigate类似的工作,即导航将发生在嵌套导航器中,如果嵌套导航器无法处理它,那么父导航器将尝试处理它。在上面的例子中,当调用navigate('Messages'), inside Feedscreen时,嵌套的tab navigator 会处理它,但是如果你调用navigate('Settings'),父stack navigator会处理它。

导航器使用特殊方法实现导航嵌套

例如,如果您在抽屉导航器中有一个stack,则抽屉的openDrawer, closeDrawer,toggleDrawer方法等也将navigation在stack navigation内的屏幕道具上可用。但是假设您有一个stack导航器作为抽屉的父级,那么堆栈导航器内的屏幕将无法访问这些方法,因为它们没有嵌套在抽屉内。
类似地,如果你在 stack navigator 中有一个 tab navigator,那么 tab navigator 中的屏幕将在它们的prop中获取 stack 的push和replace方法。navigation
如果您需要从父级向嵌套的子导航器分派操作,可以使用navigation.dispatch

  1. navigation.dispatch(DrawerActions.toggleDrawer());

嵌套导航不接受父级事件

如果你有一个嵌套在tab导航器中的stack导航器,则satck导航器中的屏幕在使用的时候是不会接收到由父tab导航器发出的事件,例如(tabPress)navigation.addListener