React Native报错：找不到导航对象，组件是否在NavigationContainer内？

核心问题分析 #

你的Menu组件存在关键写法错误：TouchableOpacity的onPress属性直接执行了navigation.navigate('Tickets')，这会在组件渲染阶段就立即触发导航操作，而非点击按钮时执行。这种写法会导致组件初始化时，navigation对象可能尚未完全绑定到组件上下文，进而触发找不到navigation的错误。

解决方案1：修正onPress写法（推荐） #

修改Menu组件的onPress，用箭头函数包裹导航方法，确保只有点击时才执行：

const Menu = () => {
  const navigation = useNavigation();

  return (
    <View style={styles.menu}>
      <TouchableOpacity
        // 用箭头函数包裹，避免渲染时立即执行
        onPress={() => navigation.navigate('Tickets')}
        style={styles.button}>
        <Text style={styles.buttontext}>Events</Text>
      </TouchableOpacity>
    </View>
  );
};

解决方案2：从父组件传递navigation props #

如果useNavigation钩子仍有问题，可以直接从Home组件把navigation传递给Menu：

1. 修改Home组件，传递navigation给Menu：

const Home = props => {
  return (
    // ...其他代码
    <View style={styles.menu}>
      <Menu navigation={props.navigation} />
    </View>
  );
};

2. 修改Menu组件，接收并使用传递来的navigation：

// 移除useNavigation的导入和调用
const Menu = ({ navigation }) => {
  return (
    <View style={styles.menu}>
      <TouchableOpacity
        onPress={() => navigation.navigate('Tickets')}
        style={styles.button}>
        <Text style={styles.buttontext}>Events</Text>
      </TouchableOpacity>
    </View>
  );
};

额外排查点 #

• 确认@react-navigation/native和@react-navigation/stack版本兼容，避免版本不匹配导致的上下文绑定问题。
• 检查项目中是否存在多个NavigationContainer，这会导致导航上下文冲突，确保整个App只有一个根NavigationContainer。

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