React Native迁移React Navigation 6后dispatch未定义报错排查

问题根源 #

1. React Navigation 6中，导航容器的引用需要挂载在NavigationContainer上，而非自定义的Navigator组件
2. 原代码通过setTimeout延迟设置引用的方式不可靠，可能导致调用navigate时navigator还未初始化
3. 未对navigator是否存在做安全校验，直接调用dispatch触发undefined报错

1. 修正App.js中导航引用的挂载位置 #

将navigationRef直接传给NavigationContainer，并通过onReady回调初始化NavigationService，移除不可靠的延迟逻辑：

import React from 'react';
import { Provider } from 'react-redux';
import { NavigationContainer, createNavigationContainerRef } from '@react-navigation/native';
import NavigationService from "./navigation/NavigationService";
import Navigator from "./navigation/Navigator";
import store from './helpers/store'
import AlertsSwitcher from './components/AlertsSwitcher';

const navigationRef = createNavigationContainerRef();

export default function App() {
    return (
        <Provider store={store}>
            <NavigationContainer 
                ref={navigationRef}
                onReady={() => {
                    NavigationService.setTopLevelNavigator(navigationRef);
                }}
            >            
                <Navigator />
            </NavigationContainer>
            <AlertsSwitcher />
        </Provider>
    );
}

2. 优化NavigationService的安全校验 #

在调用dispatch前先检查navigator是否存在，避免空指针报错：

import { CommonActions, StackActions } from '@react-navigation/native';

let navigator;

export function navigate(routeName, params) {
    if (!navigator) {
        console.warn('导航引用尚未初始化，无法执行跳转');
        return;
    }
    const action = CommonActions.navigate({ name: routeName, params });
    navigator.dispatch(action);
}

function setTopLevelNavigator(navigatorRef) {
    navigator = navigatorRef;
}

function popToTop() {
    if (navigator) {
        const action = StackActions.popToTop();
        navigator.dispatch(action);
    }
}

export default {
    navigate,
    setTopLevelNavigator,
    popToTop
};

3. 简化Navigator.js的无用forwardRef #

原MainNavigator中的forwardRef无实际作用，直接移除：

// 替换原forwardRef定义的MainNavigator
const MainNavigator = () => {
    return (
        <Stack.Navigator headerShown={false}>
            <Stack.Screen name="Auth" component={AuthStack} />
            <Stack.Screen name="SideViews" component={SideViewsStack} />
            <Stack.Screen name="SideBar" component={SideBarNavigator}/>
        </Stack.Navigator>
    );
};

export default MainNavigator;

额外注意事项 #

由于Dashboard属于SideBar栈下的嵌套屏幕，跨栈跳转时需要指定父栈名称：

// 正确的跳转方式
NavigationService.navigate('SideBar', { screen: 'Dashboard' });

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