onPress={()=> navigation.navigate('SignIn')}失效，报错Cannot read property 'navigate' of undefined求助

这个错误的核心是当前组件没有获取到navigation实例——其他页面正常是因为它们是导航栈直接注册的屏幕组件，会自动接收navigation prop，而你这个组件大概率是嵌套在屏幕里的子组件，或者没正确注入导航上下文。

给你几个可行的解决办法：

1. 函数组件用useNavigation钩子（React Navigation 5及以上版本） #

如果你的组件是函数式组件，直接用官方提供的钩子获取导航实例：

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

// 你的欢迎页组件
function WelcomeScreen() {
  const navigation = useNavigation();
  
  return (
    // 替换成你实际的按钮/可点击元素
    <TouchableOpacity onPress={() => navigation.navigate('SignIn')}>
      <Text>前往登录</Text>
    </TouchableOpacity>
  );
}

2. 类组件用withNavigation高阶组件 #

如果是类组件，用withNavigation包裹组件来注入导航：

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

class WelcomeScreen extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={() => this.props.navigation.navigate('SignIn')}>
        <Text>前往登录</Text>
      </TouchableOpacity>
    );
  }
}

// 必须用withNavigation包裹后导出
export default withNavigation(WelcomeScreen);

3. 手动传递navigation prop #

如果这个组件是某个屏幕组件的子组件，直接从父组件把navigation传过来：
父屏幕组件里：

// 父组件本身是导航栈的屏幕，能拿到navigation
function ParentScreen({ navigation }) {
  return <WelcomeScreen navigation={navigation} />;
}

子组件里接收并使用：

function WelcomeScreen({ navigation }) {
  return (
    <TouchableOpacity onPress={() => navigation.navigate('SignIn')}>
      <Text>前往登录</Text>
    </TouchableOpacity>
  );
}

另外可以检查下你的导航配置，确保SignIn已经正确注册到导航栈里，避免因为路由名称写错导致的问题。

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