React Navigation(v1.5.11)源代码阅读 : 目录结构

基于 React Navigation v1.5.11

用到的术语 :

• HOC : 高阶组件， Higher Order Component

• router : 路由器

  注意，这里所说的路由器并非是通信领域中的路由器

• route : 路由,可以是一个 普通屏幕(screen)组件(也可以叫做场景/scene组件),route本身也可以是一个 navigator/router

• navigator : 导航器，组合了一个 route, transitioner, 处理 screen 的 view 的一个组件
• 路由配置 : routeConfig , 可以理解为一个或者一个Map,Map的每一项是一个路由配置项
• 路由配置项 : 这样一个对象 : {路由名称(字符串):{screen:屏幕组件/或者另外一个 navigator/router}}
• 路由器当前状态 :
  
  • 包含一个栈，随着用户的导航/返回动作不断做压栈/出栈操作；
  • 栈的每一帧记录了用户浏览过但未出栈的某个屏幕，有一个index属性总是指向栈顶帧的索引；
  • 如何计算当前应用需要展示哪个屏幕
    
    • 如果栈顶帧是一个普通screen/scene组件，那它就是应用当前需要展示的屏幕；
    • 如果栈顶帧是一个嵌套navigator/router,那么会递归询问它应用当前需要展示的屏幕。

目录结构

//Ract Navigation v1.5.11 源代码目录结构
react-navigation/src
│
│ addNavigationHelpers.js 辅助工具,用于增强navigation,为navigation增加导航函数
│ createNavigationContainer.js HOC，封装navigator，增加 navigation 属性，使之可以作为顶层组件来使用
│ getChildEventSubscriber.js
│ NavigationActions.js 导航Action常量字符串定义和Action creator函数定义
│ PlatformHelpers.native.js
│ PlatformHelpers.web.js
│ react-navigation.js 封装导出各个功能，本身不提供实现，针对React Native
│ react-navigation.web.js 封装导出各个功能，本身不提供实现，针对React Web
│ StateUtils.js 对导航状态和路由进行原子操作的工具类push/pop/back/foward/reset/jumpTo等
│ withCachedChildNavigation.js
│
├─navigators
│ │ createNavigator.js HOC,基于一个router和一个渲染screen的view创建一个导航器navigator
│ │ //这里的view 可以是 CardStackTransitioner 之类
│ │ DrawerNavigator.js//HOC,抽屉式导航器
│ │ StackNavigator.js HOC, 栈式导航器,参数 : RouteConfigs, XxxNavigatorConfig
│ │ // == StackRouter ==> router
│ │ // ==createNavigator + CardStackTransitioner ==> navigator
│ │ // ==createNavigationContainer==> navigationContainer
│ │ SwitchNavigator.js
│ │ TabNavigator.js HOC,选项卡导航器
│
│
├─routers
│ │ createConfigGetter.js
│ │ getScreenConfigDeprecated.js
│ │ getScreenForRouteName.js 获取路由对应的屏幕组件
│ │ KeyGenerator.js route的key的生成器，格式 : id-当前时间-一个自增变量的当前值
│ │ StackRouter.js 栈式路由器
│ │ SwitchRouter.js
│ │ TabRouter.js 选项卡式路由器
│ │ validateRouteConfigMap.js 验证路由配置格式有效
│ │ validateScreenOptions.js 验证getScreenOption返回的参数有效
│
│
├─utils
│ getSceneIndicesForInterpolationInputRange.js
│ invariant.js 断言函数，用于断言预期条件是否为真
│ ReactNativeFeatures.js 提供一些工具检查RN是否具备某些功能
│ shallowEqual.js 工具函数，浅层值相等比较
│
├─views
│ AnimatedValueSubscription.js
│ ResourceSavingSceneView.js
│ ScenesReducer.js
│ SceneView.js
│ TouchableItem.js
│ Transitioner.js
│ withNavigation.js
│ withNavigationFocus.js
│ withOrientation.js
│
├─CardStack 卡片栈有关组件/动画/配置，用于构建StackNavigator
│ Card.js 卡片栈中的卡片
│ CardStack.js 卡片栈
│ CardStackStyleInterpolator.js 屏幕卡片切换插值器
│ CardStackTransitioner.js
│ PointerEventsContainer.js
│ TransitionConfigs.js
│
├─Drawer // 抽屉栈有关组件，用于构建 DrawerNavigator
│ DrawerNavigatorItems.js
│ DrawerScreen.js
│ DrawerSidebar.js
│ DrawerView.js
│
├─Header // 缺省头部组件
│ Header.js
│ HeaderBackButton.js
│ HeaderStyleInterpolator.js
│ HeaderTitle.js
│ ModularHeaderBackButton.js
│
├─SwitchView
│ SwitchView.js
│
├─TabView // Tab栈有关组件，用于构建 TabNavigator
│ TabBarBottom.js
│ TabBarIcon.js
│ TabBarTop.js
│ TabView.js