React-Navigation v5升级问题：Redux组件headerRight按钮不显示

问题本质 #

在 React Navigation v4 中，navigationOptions 是组件的静态属性，框架会在注册屏幕时自动读取这个属性生成导航栏配置——哪怕组件被 Redux 的 connect 高阶组件包装过，只要最终导出的组件挂载了这个静态属性，就能被导航系统识别。但 v5 完全抛弃了这种静态配置模式，改用动态的组件内配置方式，所以你之前的写法会失效。

解决步骤 #

因为保存按钮依赖 Redux 状态，无法移到导航配置文件中，所以需要在组件内部动态设置导航栏选项，直接访问组件内的 Redux 状态和 dispatch 方法：

1. 函数组件方案（推荐）

使用 useNavigation 钩子获取导航实例，结合 Redux 的 useSelector/useDispatch 钩子，在组件内通过 navigation.setOptions 配置 headerRight：

import React, { useEffect } from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useSelector, useDispatch } from 'react-redux';
import { saveSettings } from '../path/to/settingsActions';

function Settings() {
  const navigation = useNavigation();
  const currentSettings = useSelector(state => state.settings);
  const dispatch = useDispatch();

  // 挂载时或状态变化时更新导航选项
  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button
          title="Save"
          onPress={() => dispatch(saveSettings(currentSettings))}
        />
      )
    });
  }, [navigation, currentSettings, dispatch]);

  // 你的组件渲染逻辑
  return (
    // ...
  );
}

// 函数组件可直接用 Redux Hooks，无需 connect
export default Settings;

2. 类组件方案

如果是类组件，需要用 withNavigation 高阶组件注入导航实例，然后在生命周期中更新导航选项：

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from '@react-navigation/native';
import { connect } from 'react-redux';
import { saveSettings } from '../path/to/settingsActions';

class Settings extends React.Component {
  componentDidMount() {
    this.updateHeaderRight();
  }

  componentDidUpdate(prevProps) {
    // 当依赖的 Redux 状态变化时，更新按钮逻辑
    if (prevProps.currentSettings !== this.props.currentSettings) {
      this.updateHeaderRight();
    }
  }

  updateHeaderRight() {
    const { navigation, currentSettings, saveSettings } = this.props;
    navigation.setOptions({
      headerRight: () => (
        <Button
          title="Save"
          onPress={() => saveSettings(currentSettings)}
        />
      )
    });
  }

  render() {
    // 你的组件渲染逻辑
    return (
      // ...
    );
  }
}

const mapStateToProps = state => ({
  currentSettings: state.settings
});

const mapDispatchToProps = {
  saveSettings
};

// 先注入导航，再连接 Redux（顺序不影响）
export default withNavigation(connect(mapStateToProps, mapDispatchToProps)(Settings));

关键注意点 #

• 确保导航栈中注册的是已连接 Redux 的组件（或直接使用 Redux Hooks 的组件），这样才能在内部访问到 Redux 状态和方法。
• 把导航选项的更新放在 useEffect（函数组件）或 componentDidMount/componentDidUpdate（类组件）中，保证状态变化时按钮逻辑能同步更新。

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