React Native报错this.props.navigation.navigate不是函数问题排查

问题根因 #

你打印的this.props.navigation结构已经暴露了问题：你拿到的this.props.navigation并不是导航实例本身，外层多套了一层对象，真正携带navigate方法的导航实例存在this.props.navigation.navigation属性下。此时调用this.props.navigation.navigate自然会触发「不是函数」的报错。
出现这个问题的绝大多数场景是父组件传参错误：如果父组件本身是路由页面，自带navigation和route属性，你给BottomBar传参时大概率误写成了<BottomBar navigation={props} owner="home"/>，把整个页面的props对象直接传给了navigation属性，才会出现嵌套的结构。

修复方案 #

• 临时验证：先把跳转代码改成this.props.navigation.navigation.navigate(page)，测试是否可以正常跳转，确认问题根因。
• 修正父组件传参：父组件给BottomBar传参时，直接传入真实的导航实例即可，示例：

// 父组件（路由页面）内的调用代码
<BottomBar 
  owner="home"
  navigation={navigation} // 不要传整个props，只传navigation属性
/>

• 修正组件类型定义：你已经声明了BottomBarProps接口，但组件定义时用了any相当于类型校验完全失效，修改组件定义：

// 把泛型的any替换成你声明的接口和state类型
class BottomBar extends React.Component<BottomBarProps, {loaded: boolean}> {
  // 其余逻辑不变
}

修改后如果传参错误，TypeScript会直接在开发阶段提示类型不匹配，不用等到运行时报错。

• 可选优化：将navigateTo改为类箭头函数，避免this指向异常：

navigateTo = (page : string) => {
  if (this.props.owner == page) {
    return;
  }
  this.props.navigation.navigate(page)
}

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