[[ERROR]] undefined is not an object(evaluating '_this2.props.navigation.push')

问题

Guys I'm with this problem and I can't solve it, I try many things but this error apears to me. So I'm lost, please help me

this in the main ( Route) : App.js

const Router = createStackNavigator(
  {
    Login: {screen: LoginScreen},
    Julia: {screen: JuliaScreen},
  },
  {
    initialRouteName: 'Login',
    headerMode: 'none',
  }
)

LoginScreen.js --> The Login Screen

          <View style = {styles.formContainer}>

              <LoginForm/>

          </View>

LoginForm.js --> Component of Login ( Login Form )

import React, { Component } from 'react';
import {  View, Text, StyleSheet, TextInput, TouchableOpacity, StatusBar, AsyncStorage } from 'react-native';


import JuliaScreen from './JuliaScreen'

    export default class LoginForm extends Component {
      render() {
        return (

          <View style = {styles.container}>

            <StatusBar 
              barStyle = "light-content" 
            />

            <TextInput 

                onChangeText = {(username) => this.setState({username})}
                value = {this.state.username}
            />
            <TextInput 

                ref = {(input) => this.passwordInput = input}
                onChangeText = {(password) => this.setState({password})}
                value = {this.state.password}
            />

            <TouchableOpacity onPress = {  () => {this.props.navigation.push('Julia')} } style = {styles.btnContainer}>
                <Text style = {styles.btnText}>LOGIN</Text>
            </TouchableOpacity>    
          </View>
        );
      }

回答1:

As per your Router declaration, LoginForm is not part of navigator and it will not have any reference to navigation object. One way is to pass the navigation object while you are rendering LoginForm in LoginScreen component, like

<LoginForm navigation={this.props.navigation}/>

But this approach is not good. There is another better way to make navigation object available for components that are not part of navigator. The function is withNavigation. Take a look at the official document here

All you need is wrap the LoginForm component inside withNavigation, like

import { withNavigation } from 'react-navigation';
...
class LoginForm extends ... {
    ...
}
export default withNavigation(LoginForm);

Hope this will help!

来源：https://stackoverflow.com/questions/50615342/error-undefined-is-not-an-objectevaluating-this2-props-navigation-push

标签

javascript

reactjs

react-native

react-navigation