React Navigation导航上下文缺失求助（已包裹NavigationContainer）

问题描述 #

报错信息：

Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?

每次渲染都会触发该错误，栈追踪由鼠标点击引发，已确认整个应用已包裹在NavigationContainer中。从栈追踪能得到的信息：

• 错误发生在React内部
• React协调虚拟DOM与真实DOM时出现问题
• React Navigation在此过程中抛出报错

使用的技术栈：

• Expo Go SDK 46
• React Native Web 0.18.7
• Reactflow 11.2.0

栈追踪信息：

console.<computed>                 @    index.js:1
error                              @    react-native-logs.fx.ts:34
overrideMethod                     @    react_devtools_backend.js:4026
i                                  @    VM8448:10
t.onCommitFiberRoot.t.onCommitFiberRoot @   VM8448:10
onCommitRoot                       @    react-dom.development.js:4875
commitRootImpl                     @    react-dom.development.js:26709
commitRoot                         @    react-dom.development.js:26517
performSyncWorkOnRoot              @    react-dom.development.js:25956
flushSyncCallbacks                 @    react-dom.development.js:11982
flushSyncCallbacksOnlyInLegacyMode @    react-dom.development.js:11961
scheduleUpdateOnFiber              @    react-dom.development.js:25326
dispatchReducerAction              @    react-dom.development.js:17269
listener                           @    index.js:138
(anonymous)                        @    index.js:18
setState                           @    index.js:17
(anonymous)                        @    index.ts:21
setNodes                           @    slice.ts:120
(anonymous)                        @    SlideEditorCanvas.tsx:139
(anonymous)                        @    index.js:2308
call                               @    dispatch.js:57
emit                               @    zoom.js:219
start                              @    zoom.js:198
mousedowned                        @    zoom.js:283
(anonymous)                        @    on.js:3

调试步骤 #

1. 确认NavigationContainer作用域 #

• 检查所有调用导航API（如useNavigation()、useRoute()）的组件，包括Reactflow内部可能触发导航操作的组件，确保它们都在NavigationContainer的子树中，没有跳出容器的嵌套层级。
• 排查是否存在多个NavigationContainer实例，多个实例会导致上下文冲突，确保整个应用只有一个根导航容器。

2. 排查Reactflow与导航上下文的交互 #

从栈追踪看，错误触发链为：鼠标点击→Reactflow zoom事件→setNodes→setState→React根提交→React Navigation抛出错误：

• 查看SlideEditorCanvas.tsx第139行的代码，确认此处操作是否间接调用了导航API，或是在过程中渲染了依赖导航上下文的组件。
• 尝试在Reactflow的回调中用setTimeout延迟触发状态更新（如setNodes），避免在React同步提交阶段访问导航上下文，测试错误是否消失。

3. 验证版本兼容性 #

• 确认使用的React Navigation版本与Expo SDK 46、React Native Web 0.18.7适配，查看对应版本的官方兼容说明，确保版本匹配。
• 临时移除Reactflow组件，观察错误是否消失，以此确认是否是Reactflow与导航上下文的交互导致问题。

4. 用React DevTools定位上下文问题 #

• 通过React DevTools查看组件树，确认NavigationContainer的位置，检查触发错误的组件是否在其内部子树中。
• 查看组件的上下文提供者，验证导航上下文是否正确传递到目标组件。

5. 检查严格模式影响 #

• 尝试移除React.StrictMode包裹，关闭React严格模式，观察错误是否消失。若消失，说明是严格模式下的同步更新与导航上下文冲突，需调整状态更新时机。

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