React Native路由开发报错：this.props.navigation未定义

嘿，我一眼就看出你遇到的是React Navigation里常见的子组件无法获取navigation对象的问题，咱们一步步来搞定：

错误原因拆解 #

你先后遇到的两个报错其实是连锁问题：

1. 最初的Can't find variable: navigate：是因为你直接调用navigate但没提前定义它；
2. 后来的TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')：核心问题是HomeButton作为自定义子组件，默认不会自动继承父组件的navigation属性，导致this.props.navigation是undefined。

两种靠谱的解决方法 #

方法1：手动给子组件传递navigation props

在渲染HomeButton的父组件（比如MainScreen.js）里，把父组件的navigation对象通过props传给子组件：

如果父组件是类组件：

// MainScreen.js
import HomeButton from './HomeButton';

class MainScreen extends React.Component {
  render() {
    return (
      {/* 把navigation props传递给HomeButton */}
      <HomeButton navigation={this.props.navigation} />
    );
  }
}

如果父组件是函数组件：

// MainScreen.js
import HomeButton from './HomeButton';

function MainScreen({ navigation }) {
  return (
    <HomeButton navigation={navigation} />
  );
}

然后在HomeButton.js里就能正常使用导航了：

// HomeButton.js
class HomeButton extends React.Component {
  render() {
    // 从props中解构出navigate方法
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="回到首页"
        onPress={() => navigate('Home')}
      />
    );
  }
}

方法2：使用useNavigation钩子（推荐函数组件）

如果你用的是React Navigation 5+版本，且HomeButton是函数组件，直接用官方提供的useNavigation钩子，不用手动层层传递props：

// HomeButton.js
import { useNavigation } from '@react-navigation/native';
import { Button } from 'react-native';

function HomeButton() {
  // 直接获取navigation对象
  const navigation = useNavigation();
  return (
    <Button
      title="回到首页"
      onPress={() => navigation.navigate('Home')}
    />
  );
}

这个方法更简洁，尤其适合嵌套较深的组件，能避免繁琐的props传递。

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