React Native中navigator未定义及获取路由参数时报错求助

你遇到的这个错误很典型——SingleConversation组件里直接用this.navigation是拿不到导航对象的，它是作为props传递给组件的，并不是组件实例的默认属性。下面给你几种实用的解决方案：

方案一：从props中获取navigation（类组件通用） #

在构造函数里，你需要通过this.props访问navigation，一定要记得先调用super(props)，否则this.props会是undefined：

constructor(props) {
  super(props);
  // 直接从props中获取navigation
  const conversation_id = this.props.navigation.state.params.id;
  
  // 也可以用解构赋值让代码更简洁
  // const { navigation } = this.props;
  // const conversation_id = navigation.state.params.id;
}

方案二：用最新的route.params获取参数（推荐） #

如果你使用的是React Navigation 5.x及以上版本，官方更推荐通过route.params获取传递的参数，navigation.state.params在新版本中已被标记为废弃：

constructor(props) {
  super(props);
  const { route } = this.props;
  const conversation_id = route.params.id;
}

方案三：组件未被导航容器直接包裹时，用withNavigation高阶组件 #

如果SingleConversation不是直接作为导航栈的screen组件（比如是嵌套在其他组件里的自定义组件），可以用withNavigation高阶组件注入navigation props：

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

class SingleConversation extends React.Component {
  constructor(props) {
    super(props);
    const conversation_id = this.props.navigation.state.params.id;
  }
}

// 用withNavigation包裹后导出组件
export default withNavigation(SingleConversation);

额外补充：函数组件场景的处理方式 #

如果之后你把组件改成函数式组件，可以用useNavigation和useRoute钩子更便捷地获取导航对象和参数：

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

function SingleConversation() {
  const navigation = useNavigation();
  const route = useRoute();
  const conversation_id = route.params.id;
  
  // ...其他业务逻辑
}

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