React Native导航报错：Cannot read property 'navigate' of undefined 求助

以下是几个常见问题点及解决方式：

• 组件未纳入导航栈的screen配置
  确认SplashScreen确实被注册为导航栈的screen组件。如果直接在根组件中渲染SplashScreen而非通过导航栈，组件无法获取navigation props。正确的栈配置示例：

  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  const Stack = createNativeStackNavigator();
  
  function AppNavigator() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Splash" component={SplashScreen} />
        <Stack.Screen name="SignInPage" component={SignInPage} />
      </Stack.Navigator>
    );
  }
  

• navigation props接收错误
  检查组件接收navigation的方式：

  • 函数组件需通过解构props获取：function SplashScreen({ navigation }) { ... }
  • 类组件需通过this.props.navigation访问，不要遗漏this

• 根组件未用NavigationContainer包裹
  确保整个导航结构被NavigationContainer包裹，否则组件无法获取导航上下文。根组件示例：

  import { NavigationContainer } from '@react-navigation/native';
  import AppNavigator from './AppNavigator';
  
  export default function App() {
    return (
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    );
  }
  

• 类组件事件函数this指向错误
  若SplashScreen是类组件，点击按钮的事件处理函数可能因this指向问题导致this.props为undefined。可通过两种方式解决：

  // 方式1：使用箭头函数定义事件处理函数
  handleNavigate = () => {
    this.props.navigation.navigate('SignInPage');
  }
  
  // 方式2：在构造函数中绑定this
  constructor(props) {
    super(props);
    this.handleNavigate = this.handleNavigate.bind(this);
  }
  

• 子组件未传递navigation props
  如果触发跳转的按钮是SplashScreen的子组件，需手动将navigation props传递给子组件，否则子组件无法直接获取导航对象。

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