[[ОШИБКА]] undefined не является объектом (оценка '_this2.props.navigation.push')

Question

Ребята, я с этой проблемой, и я не могу ее решить, я пробую много вещей, но эта ошибка мне кажется.Так что я заблудился, пожалуйста, помогите мне

это в основном (маршрут): App.js

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

LoginScreen.js -> Экран входа в систему

          <View style = {styles.formContainer}>

              <LoginForm/>

          </View>

LoginForm.js -> Компонент входа (форма входа)

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>
        );
      }

Answer 1

Согласно вашей декларации Router, LoginForm не является частью navigator и не будет иметь никакой ссылки на объект navigation.Один из способов - передать объект navigation во время рендеринга LoginForm в LoginScreen компоненте, например

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

Но этот подход не хорош .Есть еще один лучший способ сделать объект navigation доступным для компонентов, которые не являются частью navigator.Функция withNavigation.Взгляните на официальный документ здесь

Все, что вам нужно, это обернуть LoginForm компонент внутри withNavigation, например

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

Надеюсь, это поможет!