Expo React Native中Context API分发action意外返回Stack导航首屏如何修复

问题原因 #

核心问题是createNativeStackNavigator()的调用位置错误：你把这句代码放在了App组件内部，每次你通过Context分发action修改alarms状态时，App组件会触发重渲染，此时会生成一个全新的Stack导航器实例，React会判定为新组件，自动重置导航栈到初始的Start页面。

修复方案 #

1. 调整Stack声明位置

将createNativeStackNavigator的调用移到App组件外部，避免重渲染时重复生成导航实例：

// App.js 顶部代码调整
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// 移到组件外部声明
const Stack = createNativeStackNavigator();

export default function App() {
  // 删除原组件内部的 const Stack = createNativeStackNavigator() 代码
  // 其余原有逻辑保持不变
}

2. 可选优化（避免额外重渲染与闭包问题）

• 用useCallback包裹dispatchAlarmEvent，同时将setAlarms改为函数式更新，避免依赖闭包旧值，也能减少context value的更新频率：

const dispatchAlarmEvent = useCallback((actionType, payload) => {
  switch (actionType) {
    case 'ADD_ALARM':
      setAlarms(prev => [...prev, payload]);
      break;
    case 'REMOVE_ALARM':
      setAlarms(prev => prev.filter(alarm => alarm.id !== payload.id));
      break;
    case 'EDIT_ALARM':
      setAlarms(prev => [...prev.filter(alarm => alarm.id !== payload.id), payload]);
      break;
    default:
     break;
  }
}, []);

• 用useMemo缓存Context的value对象，避免每次App重渲染都生成新对象，引发所有消费Context的组件不必要重渲染：

const contextValue = useMemo(() => ({
  alarms,
  dispatchAlarmEvent,
  log: (x) => console.log(x)
}), [alarms, dispatchAlarmEvent]);

// Provider替换为缓存后的值
<AppContext.Provider value={contextValue}>

修改完成后，分发action更新状态时不会再重建导航栈，就不会自动跳转回首屏了。

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