React Native中基于Redux属性动态隐藏导航头部的问题

你碰到的问题主要源于两个点：

1. navigationOptions里的条件判断有语法错误：typeof params.mainFeedIsLoading !== undefined 这个判断永远为真——因为typeof返回的是字符串类型（比如"undefined"），和undefined值比较肯定不相等，导致不管mainFeedIsLoading实际是什么值，都会执行return { header: null }。
2. Navigation Params不会自动同步Redux状态：Redux中的mainFeedIsLoading更新后，不会自动传递到navigation的params里，需要手动把Redux状态同步到导航参数中。

步骤1：修正navigationOptions的条件判断 #

先把逻辑改正确，只有当mainFeedIsLoading为true时才隐藏头部：

static navigationOptions = ({ navigation }) => {
  const { params = {} } = navigation.state;
  // 修正条件：仅当mainFeedIsLoading为true时隐藏header
  if (params.mainFeedIsLoading === true) {
    return { header: null };
  }
  return {
    headerTitle: <Logo type="default_logo" />,
    headerTitleStyle: { alignItems: "center" },
    headerMode: "screen",
    headerStyle: { paddingRight: 10, paddingLeft: 10 },
    headerLeft: (
      <ClickableIcon
        source={NotificationInactive}
        height={35}
        width={35}
        onIconPressed={() => alert("Notifications Clicked")}
      />
    ),
    headerRight: (
      <ClickableIcon
        height={35}
        width={35}
        source={AddNewUserInactive}
        onIconPressed={() => alert("Add New Clicked")}
      />
    )
  };
};

步骤2：同步Redux状态到Navigation Params #

你的组件已经连接到Redux（能获取mainFeedIsLoading状态），所以需要在组件状态更新时，手动把Redux的值同步到导航参数中。

类组件实现方式 #

在componentDidUpdate生命周期里监听mainFeedIsLoading的变化，一旦变化就更新navigation params：

import { connect } from 'react-redux';

class YourScreen extends React.Component {
  // ... 其他组件代码 ...

  componentDidUpdate(prevProps) {
    // 当Redux中的mainFeedIsLoading变化时，同步更新导航参数
    if (prevProps.mainFeedIsLoading !== this.props.mainFeedIsLoading) {
      this.props.navigation.setParams({
        mainFeedIsLoading: this.props.mainFeedIsLoading
      });
    }
  }

  // ... 上面修正后的navigationOptions代码 ...
}

// 连接Redux，把mainFeedIsLoading映射为组件props
const mapStateToProps = (state) => ({
  mainFeedIsLoading: state.yourReducer.mainFeedIsLoading // 这里替换成你实际的reducer路径
});

export default connect(mapStateToProps)(YourScreen);

函数组件（React Hooks）实现方式 #

用useEffect钩子监听mainFeedIsLoading的变化，然后调用navigation.setParams：

import { useSelector } from 'react-redux';
import { useEffect, useLayoutEffect } from 'react';

function YourScreen({ navigation }) {
  const mainFeedIsLoading = useSelector(state => state.yourReducer.mainFeedIsLoading);

  // 同步Redux状态到导航参数
  useEffect(() => {
    navigation.setParams({ mainFeedIsLoading });
  }, [mainFeedIsLoading, navigation]);

  // 也可以直接在这里动态设置header（部分react-navigation版本推荐这种方式）
  useLayoutEffect(() => {
    navigation.setOptions({
      header: mainFeedIsLoading ? null : undefined,
      headerTitle: <Logo type="default_logo" />,
      headerTitleStyle: { alignItems: "center" },
      headerStyle: { paddingRight: 10, paddingLeft: 10 },
      headerLeft: (
        <ClickableIcon
          source={NotificationInactive}
          height={35}
          width={35}
          onIconPressed={() => alert("Notifications Clicked")}
        />
      ),
      headerRight: (
        <ClickableIcon
          height={35}
          width={35}
          source={AddNewUserInactive}
          onIconPressed={() => alert("Add New Clicked")}
        />
      )
    });
  }, [mainFeedIsLoading, navigation]);

  return (
    // 组件内容
  );
}

可选方案：直接在navigationOptions中访问Redux状态 #

如果你不想依赖导航参数，也可以直接在navigationOptions里获取Redux状态（不推荐，因为耦合性高）：

// 假设你有全局的store实例
import store from '../path/to/your/store';

static navigationOptions = ({ navigation }) => {
  const state = store.getState();
  const mainFeedIsLoading = state.yourReducer.mainFeedIsLoading;

  if (mainFeedIsLoading === true) {
    return { header: null };
  }
  // ... 其他header配置 ...
};

先修正条件判断的语法错误，确保逻辑正确；再通过生命周期钩子（类组件）或useEffect（函数组件）把Redux状态同步到导航参数中，让navigationOptions能拿到最新的状态值。

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