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

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

это в основном (Маршрут): 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>
        );
      }

react-native reactjs javascript react-navigation
person Julia Silva    schedule 31.05.2018    source источник
comment
Это должен быть StackNavigator, а не createStackNavigator.   -  person digit    schedule 31.05.2018
comment
Проблема не в этом, я тоже так пробовал, но та же ошибка   -  person Julia Silva    schedule 31.05.2018
comment
попробуйте this.props.navigation.navigate вместо push   -  person digit    schedule 31.05.2018
comment
см. это: wix.github.io/react-native-navigation/#/usage   -  person aravind_reddy    schedule 31.05.2018
comment
Возможный дубликат StackNavigator через компонент дает неопределенную ошибку   -  person bennygenel    schedule 31.05.2018

Ответы (1)


arrow_upward
0
arrow_downward

Согласно вашему объявлению 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);

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

person Prasun    schedule 31.05.2018