[[ERROR]] undefined 不是一个对象(评估'_this2.props.navigation.push') [英] [[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

这个在主(路由):App.js

this in the main ( Route) : App.js

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

LoginScreen.js --> 登录屏幕

LoginScreen.js --> The Login Screen

          <View style = {styles.formContainer}>

              <LoginForm/>

          </View>

LoginForm.js --> 登录组件(登录表单)

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

推荐答案

根据您的 Router 声明，LoginForm 不是 navigator 的一部分并且它不会有任何对 navigation 对象的引用.一种方法是在 LoginScreen 组件中渲染 LoginForm 时传递 navigation 对象，例如

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}/>

但是这种方法不好.还有另一种更好的方法可以使 navigation 对象可用于不属于 navigator 的组件.函数是withNavigation.看看官方文档这里

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

你所需要的只是将 LoginForm 组件包裹在 withNavigation 中，比如

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

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

希望这会有所帮助！

这篇关于[[ERROR]] undefined 不是一个对象(评估'_this2.props.navigation.push')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！