React Native报错：_this2.props.navigation.push未定义，求解决方案

Hey there, let's break down why you're seeing this error and how to fix it quickly!

The Root Cause #

Your LoginForm component is a child of LoginScreen—it's not directly registered as a screen in your navigation stack. React Navigation automatically passes the navigation prop only to components that are defined as screens in your stack navigator. Since LoginForm is a nested component, this.props.navigation isn't being passed to it by default, hence the "undefined" error.

Solutions to Try #

1. Manually Pass the Navigation Prop from LoginScreen

The simplest fix is to pass the navigation prop from LoginScreen down to LoginForm:

Update your LoginScreen.js code:

<View style={styles.formContainer}>
  <LoginForm navigation={this.props.navigation} />
</View>

This way, LoginForm will have access to the navigation object via its props, and this.props.navigation.push('Julia') will work as expected.

2. Use the useNavigation Hook (Convert to Function Component)

If you're open to converting LoginForm to a function component, you can use React Navigation's useNavigation hook to get access to the navigation object without manually passing props:

import React, { useState } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, StatusBar } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function LoginForm() {
  const navigation = useNavigation();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      <TextInput 
        onChangeText={setUsername} 
        value={username} 
        placeholder="Username"
      />
      <TextInput 
        onChangeText={setPassword} 
        value={password} 
        placeholder="Password"
        secureTextEntry
      />
      <TouchableOpacity 
        onPress={() => navigation.push('Julia')} 
        style={styles.btnContainer}
      >
        <Text style={styles.btnText}>LOGIN</Text>
      </TouchableOpacity>
    </View>
  );
}

Note: Make sure your React Navigation version supports hooks (v5+), and that LoginForm is rendered within the context of your navigation container.

3. Use withNavigation HOC (Keep Class Component)

If you want to keep LoginForm as a class component, wrap it with the withNavigation higher-order component to inject the navigation prop automatically:

import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, StatusBar } from 'react-native';
import { withNavigation } from '@react-navigation/compat';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = { username: '', password: '' }; // Don't forget to initialize state!
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content" />
        <TextInput 
          onChangeText={(username) => this.setState({ username })} 
          value={this.state.username} 
          placeholder="Username"
        />
        <TextInput 
          onChangeText={(password) => this.setState({ password })} 
          value={this.state.password} 
          placeholder="Password"
          secureTextEntry
        />
        <TouchableOpacity 
          onPress={() => this.props.navigation.push('Julia')} 
          style={styles.btnContainer}
        >
          <Text style={styles.btnText}>LOGIN</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default withNavigation(LoginForm);

Also, I noticed your original class component was missing a constructor to initialize state—added that in to avoid another potential error!

Quick Check #

Just to be safe, confirm that LoginScreen is correctly receiving the navigation prop (since it's a registered screen, it should be). If LoginScreen is a class component, make sure it's extending Component and accessing this.props.navigation properly.

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