使用自定义HOC包裹StackNavigator页面后导航头空白问题

我之前也碰到过几乎一模一样的问题！你猜得没错，就是多层connect导致React Navigation无法正确读取被包裹组件的导航配置，才出现导航头显示但内容空白的情况。

问题根源 #

React Navigation的导航选项（比如title、headerStyle这些）是从组件的静态navigationOptions属性（或函数）里读取的。当你用一个自己写的、同样套了connect的HOC去包裹页面组件时，外层的HOC组件并没有把内层原组件的导航配置传递出去——相当于导航系统“看不到”原组件的导航设置了，自然就显示空白。

具体解决方案 #

1. 在HOC里继承原组件的导航选项

直接在你的自定义HOC中，把被包裹组件的navigationOptions继承过来，不管它是静态属性还是函数：

import React from 'react';
import { connect } from 'react-redux';

const withAuth = (WrappedComponent) => {
  class AuthHOC extends React.Component {
    // 关键：继承原组件的导航配置
    static navigationOptions = (props) => {
      // 如果原组件的navigationOptions是函数，就传入props调用它
      if (typeof WrappedComponent.navigationOptions === 'function') {
        return WrappedComponent.navigationOptions(props);
      }
      // 如果是静态对象就直接返回，没有的话返回空对象兜底
      return WrappedComponent.navigationOptions || {};
    };

    componentDidMount() {
      const { user, navigation } = this.props;
      // 你的认证逻辑
      if (!user?.id) {
        navigation.navigate('Login');
      }
    }

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

  // HOC自身的connect逻辑
  const mapStateToProps = (state) => ({
    user: state.user,
  });

  return connect(mapStateToProps)(AuthHOC);
};

export default withAuth;

2. 调整connect的顺序

确保页面组件自身的connect放在最内层，再用你的withAuth包裹它：

// 页面组件先做自己的connect
const ConnectedProfilePage = connect(profileMapState)(ProfilePage);
// 再用认证HOC包裹已经connect过的组件
export default withAuth(ConnectedProfilePage);

反过来的话，HOC的connect会覆盖原组件的导航配置，更容易出问题。

3. 改用动态设置导航选项（函数组件推荐）

如果你的页面是函数组件，直接用React Navigation的钩子在组件内部动态设置导航头，彻底避开静态属性丢失的问题：

import { useNavigation, useLayoutEffect } from '@react-navigation/native';
import { connect } from 'react-redux';

const ProfilePage = ({ user }) => {
  const navigation = useNavigation();

  // 组件挂载时设置导航选项
  useLayoutEffect(() => {
    navigation.setOptions({
      title: '我的主页',
      headerStyle: { backgroundColor: '#fff' },
      // 其他导航配置...
    });
  }, [navigation]);

  // 页面内容
  return (
    <View>
      {/* ... */}
    </View>
  );
};

const mapStateToProps = (state) => ({
  user: state.user,
});

export default withAuth(connect(mapStateToProps)(ProfilePage));

这样不管被多少层HOC包裹，只要组件能拿到navigation对象，就能正确设置导航头。

内容的提问来源于stack exchange，提问作者izikandrw