React Navigation：更新状态后如何停留在当前页面而非跳转默认路由

看起来你遇到的问题是自定义Header里的下拉选项变更时，dispatch状态更新后React Navigation自动跳转到了默认路由，即便你想要停留在当前页面。这种情况通常是由几个常见原因导致的，下面我来帮你一步步排查和解决：

1. 排查是否意外触发了导航方法 #

首先看你提供的代码片段，onYearChange里解构了navigate但没有调用它，但有可能在组件的其他逻辑中，状态更新间接触发了navigate('Home')或者类似的代码。先检查：

• 移除onYearChange中未使用的navigate变量，避免后续误操作：

onYearChange(e) {
  const { setYear } = this.props;
  // 只保留状态更新逻辑，去掉未使用的navigate
  setYear(e);
}

2. 检查Redux状态是否影响了导航路由 #

如果你用Redux管理导航状态（比如集成了react-navigation-redux-helpers），要确保setYear对应的reducer没有意外修改navigation相关的state。导航状态一旦被错误覆盖，就会导致路由重置到初始页。

• 打开你的reducer文件，确认处理SET_YEAR action时，只更新year相关字段，不触碰navigation分支：

// 正确的reducer示例
const rootReducer = combineReducers({
  year: yearReducer, // 只处理year的更新
  navigation: navigationReducer, // 导航状态单独管理，不受setYear影响
});

3. 确保自定义Header的导航props传递正确 #

自定义Header组件应该从React Navigation提供的navigation prop中获取导航方法，而不是手动传递可能冲突的navigate。正确的Header注册方式应该是：

// 在StackNavigator中配置Header
<Stack.Screen
  name="YourCurrentScreen"
  component={YourScreen}
  options={({ navigation }) => ({
    header: () => <CustomHeader navigation={navigation} setYear={setYear} />
  })}
/>

这样Header里的导航方法是直接来自当前页面的navigation对象，不会导致路由跳转混乱。

4. 避免组件重渲染导致路由重置 #

如果year状态更新后，整个StackNavigator组件被重新渲染，会导致导航器重新初始化并跳转到默认路由。解决办法：

• 用React.memo包裹自定义Header组件，减少不必要的重渲染：

import React, { memo } from 'react';

const CustomHeader = memo(({ navigation, setYear }) => {
  // 你的Header组件逻辑
  const onYearChange = (e) => {
    setYear(e);
  };

  return (
    <View style={styles.alignMenu}>
      {/* 你的下拉列表组件 */}
    </View>
  );
});

export default CustomHeader;

• 确保StackNavigator组件不依赖year状态，将它提升到不随year变化的父组件中（比如App.js根组件）。

5. 强制停留在当前页面（兜底方案） #

如果以上方法都无效，可以在状态更新后，手动导航回当前页面：

onYearChange(e) {
  const { navigation, setYear } = this.props;
  setYear(e);
  // 获取当前路由信息，强制导航回来
  const currentRoute = navigation.getCurrentRoute();
  navigation.navigate(currentRoute.name, currentRoute.params);
}

不过这只是兜底方案，建议先排查前面的根本原因。

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