React Navigation源代码阅读 : views/withNavigation.js

最新推荐文章于 2025-08-23 11:06:25 发布

原创最新推荐文章于 2025-08-23 11:06:25 发布 · 664 阅读

0 ·

CC 4.0 BY-SA版权

React Navigation 同时被 3 个专栏收录

49 篇文章

订阅专栏

JavaScript

38 篇文章

订阅专栏

React Native

31 篇文章

订阅专栏

本文介绍了一个高阶组件（HOC），用于增强React组件并为其添加navigation属性。通过使用上下文(context)来传递navigation对象，使得目标组件能够访问到所需的导航功能。

import React from 'react';
import propTypes from 'prop-types';
import hoistStatics from 'hoist-non-react-statics';

/**
 * HOC,增强一个组件，让其具有 navigation 属性
 * @param Component
 */
export default function withNavigation(Component) {
  class ComponentWithNavigation extends React.Component {
    static displayName = `withNavigation(${Component.displayName ||
      Component.name})`;

    static contextTypes = {
      navigation: propTypes.object.isRequired,
    };

    render() {
      const { navigation } = this.context;
      return (
        <Component
          {...this.props}
          navigation={navigation}
          ref={this.props.onRef}
        />
      );
    }
  }

  // 静态方法复制, 源组件 Component 的静态方法复制到 容器组件 ComponentWithNavigation 上面
  return hoistStatics(ComponentWithNavigation, Component);
}