reactjs - 如果屏幕包裹在 HOC 中，则 StackNavigator 屏幕的 react 导航标题不会呈现

Question

摘要

1. 我创建了一个自定义 HOC，通过检查 redux 存储是否具有 user.id 属性来检查用户是否经过身份验证
2. 我正在使用 React 导航和 React Native
3. 当我将屏幕组件包装在 HOC 中时，导航标题会出现，但被清空(相反，如果我不将屏幕组件包装在 HOC 中，导航标题会正确显示)
4. HOC 和包装组件中还混合了 React-Redux Connect，我想知道这是否会导致问题

当我将屏幕组件包装在自定义 HOC 中时，为什么我的 react 导航标题无法正确显示？

我想知道我是否以错误的顺序包装了东西——这些是屏幕组件中可能有问题的代码行(当我测试时，其中一个或另一个被注释掉):

// export default connect(mapStateToProps, mapDispatchToProps)(EntityPage); <--this renders the header fine

  export default connect(mapStateToProps, mapDispatchToProps)(withAuthentication(EntityPage)); <--this renders the header blank

代码

我制作的用于检查身份验证的自定义 HOC

import React, {
  Component
} from 'react';
import PropTypes from 'prop-types';
import {
  Alert
} from 'react-native';
import {
  connect
} from 'react-redux';

function withAuthentication(Comp) {
  class AuthenticatedScreen extends Component {
    componentDidUpdate(prevProps) {
      if (this.props.user && !this.props.user.id) {
        Alert.alert('you\'re not logged in anymore');
      }
    }

    render() {
      return <Comp { ...this.props
      }
      />;
    }
  }

  function mapStateToProps(state) {
    return {
      user: state.user,
    };
  }

  AuthenticatedScreen.propTypes = {
    user: PropTypes.object,
    component: PropTypes.object,
  };

  return connect(mapStateToProps)(AuthenticatedScreen);
}

export default withAuthentication;

我使用自定义身份验证 HOC 包装的屏幕组件

import withAuthentication from '../User/AuthorizedHOC'; <--my custom HOC import

class EntityPage extends Component {
    static navigationOptions = ({navigation}) => {
      return {
        title: 'My Entities',
        headerRight: (
>>        <Button type='action' title='Add New Entity' onPress={()=>navigation.navigate('EntityCreate')}>
          </Button>),
        headerStyle: {paddingRight: (Platform.OS === 'ios') ? 0 : 8},
      };
    };

    componentDidMount() {
      this.props.loadEntities();
    }

    render() {
      const {
        entities,
      } = this.props;

      return (
        <FullscreenView>
          <EntityList entities={entities}/>
        </FullscreenView>
      );
    }
  }

  function mapStateToProps(state) {
    return {
      entities: getSortedEntityList(state),
        };
  }

  function mapDispatchToProps(dispatch) {
    return {
      loadEntities: () => dispatch(loadEntities()),
      deleteEntity: (entity) => dispatch(deleteEntity(entity)),
    };
  }

  // export default connect(mapStateToProps, mapDispatchToProps)(EntityPage); <--this renders the header fine

  export default connect(mapStateToProps, mapDispatchToProps)(withAuthentication(EntityPage)); <--this renders the header blank

Answer 1

您可以尝试使用compose来自 redux 的方法。主要实用程序是

write deeply nested function transformations without the rightward drift of the code

自 connect因此需要一个原始组件，

使用

import {compose} from "redux"

const composedWithAuthentication = compose(
    connect(mapStateToProps, mapDispatchToProps),
    withAuthentication
);

const newWithAuth = composedWithAuthentication(EntityPage)

newWithAuth.navigationOptions = {
 // Your Options
}

这会在最外面的hoc上设置navigationOptions

或更简洁的方法是使用 hoistStatics来自recompose

export default hoistStatics(composedWithAuthentication)(EntityPage);

Augments a higher-order component so that when used, it copies non-react static properties from the base component to the new component.