React Native中react-navigation子组件按钮跳转页面报错求助

嘿，这个问题我之前也踩过坑！核心原因就是你的LoginComponent没拿到navigation props——导航器只会把这个props直接传给它注册的屏幕组件，而LoginComponent是LoginScreen的子组件，自然不会自动获取到。下面给你几个实用的解决办法：

方法一：手动传递navigation props #

既然LoginComponent是LoginScreen的子组件，那在父组件里渲染它时，直接把navigation传过去就行：

// LoginScreen.js 里的代码
import LoginComponent from './LoginComponent';

class LoginScreen extends React.Component {
  render() {
    // 把父组件的navigation props传给子组件
    return <LoginComponent navigation={this.props.navigation} />;
  }
}

这样LoginComponent里就能正常调用this.props.navigation.navigate('UserPage')了。

方法二：用withNavigation高阶组件（类组件专属） #

如果不想手动传props，可以用React Navigation提供的withNavigation高阶组件，它能给任意组件注入navigation props：

1. 先导入高阶组件：

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

2. 用它包裹你的LoginComponent：

class LoginComponent extends React.Component {
  handleJump = () => {
    this.props.navigation.navigate('UserPage');
  };

  render() {
    return <Button onPress={this.handleJump} title="跳转到用户页" />;
  }
}

// 关键步骤：用withNavigation包裹组件后导出
export default withNavigation(LoginComponent);

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

如果你的LoginComponent是函数组件，用官方推荐的useNavigation钩子更简洁：

1. 导入钩子：

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

2. 在组件内获取navigation对象：

function LoginComponent() {
  const navigation = useNavigation();

  const handleJump = () => {
    navigation.navigate('UserPage');
  };

  return <Button onPress={handleJump} title="跳转到用户页" />;
}

export default LoginComponent;

最后再提醒一句：记得确认App.js的路由配置里，你要跳转的页面确实叫UserPage（别打错名字哦！）。

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