如何修复React Navigation中undefined is not an object (evaluating 'navigation.push')报错

React Navigation报错原因与解决方案 #

该报错属于路由匹配失败/导航上下文丢失类问题，触发原因可逐一排查以下几点：

• 路由名称大小写/拼写不匹配
  检查route.js中注册的目标页面name属性值，与navigation.navigate()中传入的第一个参数完全一致，注意该参数严格区分大小写，额外的空格、拼写错误、大小写不一致都会触发该报错。
• Login组件未正确获取navigation属性
  只有Stack.Screen/Tab.Screen等路由组件直接配置的页面，默认会注入navigation属性。如果Login是其他页面的子组件，或者你没有从props正确解构该属性，调用时就会报错。
  非路由页面调用跳转可以使用useNavigation钩子获取导航对象，代码示例：

  import { useNavigation } from '@react-navigation/native';
  
  // 组件内部调用
  const navigation = useNavigation();
  // 跳转逻辑
  navigation.navigate('你注册的目标页面准确名称');
  

• 导航容器未正确包裹路由树
  确认你项目根组件最外层已经包裹了NavigationContainer组件，所有路由相关的组件都在该容器的子层级内，否则会丢失导航上下文导致调用失败。
• 嵌套导航跳转规则错误
  如果你使用了嵌套路由（比如栈导航嵌套标签导航），跳转子导航内的页面需要符合嵌套路由的跳转规则，不能直接传入子页面的名称。

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