React Native报TypeError: undefined is not an object (evaluating 'navigation.navigate')如何解决

navigation prop 未正确注入到当前组件，导致 this.props.navigation 为 undefined，调用 navigate 方法就会触发该报错，可按以下步骤逐一排查解决：

• 第一步：修复构造函数写法
  类组件需要在构造函数中接收props并传入super才能正常访问this.props，把你的构造函数改成如下写法：

  constructor(props){
      super(props);
  }
  

• 第二步：确认组件是否是导航路由直接注册的页面
  如果该组件是直接配置在导航路由表中的页面，完成第一步后问题就会解决；如果该组件是其他页面的内嵌子组件，选以下任意一种方案处理：
  • 方案A：父组件传值
    父组件调用当前组件时，手动把自己拿到的navigation prop传递过来：

    {/* 父组件的render方法里调用CreateTroubleT的地方 */}
    <CreateTroubleT navigation={this.props.navigation} />
    

  • 方案B：用withNavigation高阶组件注入（推荐，不需要每层传值）
    1. React Navigation v5/v6版本安装@react-navigation/compat依赖，v4及以下版本自带无需安装
    2. 组件头部引入withNavigation：

    import { withNavigation } from '@react-navigation/compat';
    

    3. 修改导出语句，用withNavigation包裹组件：

    export default withNavigation(CreateTroubleT);
    

• 额外注意项：你的代码里漏了TouchableOpacity的导入，需要在react-native的导入语句里补上，否则会触发其他报错：

  import { TouchableOpacity } from 'react-native';
  

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