React Navigation源代码阅读 :navigators/createNavigator.js

import React from 'react';

/**
 * HOC:基于传入的路由器 router 和用来渲染屏幕(场景)的 view 创建一个导航器 navigator
 * Creates a navigator based on a router and a view that renders the screens.

 * @param router 路由器,可能是 TabRouter,StackRouter,SwitchRouter 等组件的一个实例
 * @param routeConfigs 路由配置
 * @param navigatorConfig 导航器配置
 * @returns {function(*): Navigator} navigator 工厂函数
 */
export default function createNavigator(router, routeConfigs, navigatorConfig) {
    // 返回一个创建导航器实例 navigator 的函数,该函数会接受一个 NavigationView 组件作为参数,
    // 包装该组件从而构建另外一个 Navigator 组件并返回该 Navigator 组件
    return NavigationView => {
        // 一个箭头函数 ,
        // 定义导航器组件 Navigator, 该组件其实是参数组件 NavigationView 的包装组件,
        // 该定义逻辑中向被包装组件 NavigationView 传递属性 this.props , 并为其设置
        // 路由器属性 router
        class Navigator extends React.Component {
            static router = router;
            static navigationOptions = null;

            render() {
                return <NavigationView {...this.props} router={router}/>;
            }
        }

        return Navigator;
    };
}

猜你喜欢

转载自blog.csdn.net/andy_zhang2007/article/details/80268228