React Native中navigation.navigate未定义报错（Hermes引擎）

问题描述 #

点击“View Menu”按钮时触发TypeError错误，提示：

"navigation.navigate is not a function (it is undefined), js engine: hermes"

错误原因 #

1. WelcomeScreen未注册路由：App.js中设置了initialRouteName="Welcome"，但Stack.Navigator里没有添加WelcomeScreen对应的路由配置，导致该组件没有被导航器上下文包裹，无法获取navigation属性。
2. 组件导入导出不匹配：MenuScreen.js导出的组件名为MenuItems，但App.js中导入并使用的是MenuScreen，存在命名不一致问题。

解决方案 #

步骤1：注册WelcomeScreen路由 #

修改App.js的Stack.Navigator部分，添加WelcomeScreen的路由配置：

function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Welcome">
                <Stack.Screen name="Welcome" component={WelcomeScreen} /> {/* 新增该行 */}
                <Stack.Screen name="Login" component={LoginScreen} />
                <Stack.Screen name="Menu" component={MenuScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

步骤2：修正MenuScreen组件命名（规范操作） #

方案A：修改MenuScreen.js的组件名

将MenuScreen.js中的组件定义和导出统一为MenuScreen：

// 替换原MenuItems定义
const MenuScreen = () => {
    // 原组件逻辑保持不变
};

// 替换原导出语句
export default MenuScreen;

方案B：修改App.js的导入语句

如果不想修改MenuScreen.js，调整App.js的导入和路由配置：

// 修改导入语句
import MenuItems from "./Screens/MenuScreen";

// 修改路由组件
<Stack.Screen name="Menu" component={MenuItems} />

验证修改 #

完成上述调整后重新运行应用，点击“View Menu”按钮即可正常跳转到菜单页面，错误提示消失。

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