UI-Kitten Topbar的MenuItem onPress导航报错：Property 'navigation'不存在

安全阿岳

2026-7-11

错误原因很明确：你的TopNavigator组件没有获取到React Navigation的navigation对象，直接调用navigation.navigate自然会报错。下面提供两种靠谱的解决方法：

方法一：使用`useNavigation`钩子（推荐）

这是React Navigation为函数组件提供的最便捷的获取navigation方式：

先导入useNavigation钩子：

import { useNavigation } from '@react-navigation/native';

在TopNavigator组件内部获取navigation对象：

export const TopNavigator = (): React.ReactElement => {
  // 新增这行，获取navigation实例
  const navigation = useNavigation();
  const [menuVisible, setMenuVisible] = React.useState(false);

  const toggleMenu = (): void => {
    setMenuVisible(!menuVisible);
  };

  // ... 其他代码保持不变
};

这样修改后，MenuItem的onPress回调里的navigation.navigate('myScreenName')就能正常触发页面跳转了。

如果你的TopNavigator是嵌套在某个页面组件中使用的，可以直接把页面的navigation props传递进去：

修改TopNavigator组件，接收navigation作为props：

// 给组件添加navigation参数
export const TopNavigator = ({ navigation }): React.ReactElement => {
  const [menuVisible, setMenuVisible] = React.useState(false);

  const toggleMenu = (): void => {
    setMenuVisible(!menuVisible);
  };

  // ... 其他代码保持不变
};

在使用TopNavigator的页面组件中，传递navigation：

// 示例：在HomeScreen页面中使用TopNavigator
export const HomeScreen = ({ navigation }) => {
  return (
    <Layout>
      {/* 把当前页面的navigation传递给TopNavigator */}
      <TopNavigator navigation={navigation} />
      {/* 页面其他内容 */}
    </Layout>
  );
};