React Native中navigation.navigate未定义报错求助

问题重现 #

使用react-navigation实现页面跳转时，出现错误：

TypeError: navigation.navigate is not a function (it is undefined)

错误出现在MenuButton组件的传参行：<MenuButton text={key} navigation={navigation}/>，且在MenuButtonGroup中打印navigation得到的结果是字符串"Rooms"，而非预期的导航对象。

核心原因 #

传入MenuButtonGroup的navigation不是react-navigation提供的导航对象，而是一个字符串值，导致后续调用navigate方法时出错。

解决步骤 #

1. 检查HouseMenu组件的参数传递 #

确保HouseMenu作为Stack.Screen的组件，正确接收并传递导航对象给MenuButtonGroup：

const HouseMenu = ({ navigation }) => {
  return (
    <View>
      {/* 必须传递navigation对象，而非字符串 */}
      <MenuButtonGroup navigation={navigation} />
    </View>
  );
};

避免出现类似navigation="Rooms"这种错误传参方式。

2. 确认MenuButton组件的正确实现 #

确保MenuButton正确接收navigation参数，并调用navigate方法跳转到目标页面：

const MenuButton = ({ text, navigation }) => {
  const handleNavigate = () => {
    // 目标页面名称要和Stack.Navigator中定义的name完全一致
    navigation.navigate('RoomsMenu');
  };

  return (
    <TouchableOpacity onPress={handleNavigate}>
      <Text>{text}</Text>
    </TouchableOpacity>
  );
};

检查是否存在变量名拼写错误（比如把navigation写成navigate），或者在组件内部重定义了navigation变量导致覆盖。

3. 验证导航容器配置 #

确认Stack.Navigator中的页面名称与跳转时使用的名称一致：

const App = () => {
return (
    <NavigationContainer>
        <Stack.Navigator initialRouteName="HouseMenu">
            <Stack.Screen name="HouseMenu" component={HouseMenu} />
            {/* 页面名称是"RoomsMenu"，跳转时必须使用这个名称 */}
            <Stack.Screen name="RoomsMenu" component={rooms} />
        </Stack.Navigator>
    </NavigationContainer>
);
}

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