React-Navigation架构嵌套路由：

React-Navigation ^5x架构嵌套路由：

react-native使用的版本是^0.64，导航用的5x。目前已经出到了6x,不过也相差不大。

---

---

前言

各个子模块分开定义路由肯定方便我们日后扩展业务需求，也方便后续维护人员可以更快的维护以及新成员更快的熟悉业务代码。

---

不多说了，直接贴代码开始。

一、React-Navigation包引用

React-Navigation ^5x导入的各个库官方.文档已经提供给我们了，只需要按照正常流程 install 即可。

二、import { NavigationContainer } from ‘@react-navigation/native’

1.注册主路由容器 NavigationContainer

代码如下（示例）：

2.App.js / index.js

代码如下（示例）：

 return (
      <Root>
        <ContextProvider>
          <NavigationContainers />
        </ContextProvider>
      </Root>
  );

App.js 入口以NavigationContainers为中心，假如有Redux就直接包裹在外层。

三、import { createDrawerNavigator } from ‘@react-navigation/drawer’;

1.注册抽屉容器 DrawerNavigation

代码如下（示例）：

DrawerNavigation以包裹底部导航栏并在drawerContent属性内定义抽屉UI。

四、import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’;

1.注册底部导航栏 BottomTabNavigation

底部导航栏按照正常的来写即可，而我会在里面比如首页使用 HomeStack 来注册子模块。

四、import { createStackNavigator } from ‘@react-navigation/stack’;

1.子模块嵌套 Stack

各个屏幕定义在Stack内。

---

总结

以上就是我自己的嵌套路由定义。