JavaEar 专注于收集分享传播有价值的技术资料

React Native:TypeError:undefined不是对象(评估'this.props.navigation.navigate') (React Native: TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate'))

Being a beginner in react-native, I can't figure out the problem in my code. By reading on the internet, I have an idea that I have some binding issue maybe.

So, my code starts with index.js and registers the App component over there. The app component just contains the stack navigation routes. It load the LoginScreen component (displays logo, background and name of the application) which in turn loads LoginForm component. There is no authentication on the Login button and the only thing I need is that the Menu component is loaded as I press the Login button. It is giving the TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

index.js

import { AppRegistry } from 'react-native';
import App from './App';    

AppRegistry.registerComponent('bluebulk', () => App);

App.js

import { StackNavigator } from 'react-navigation';
import LoginScreen from './src/components/login/LoginScreen';
import Menu from './src/components/menu/Menu';

  const App = StackNavigator({
  Main: { screen: LoginScreen },
  Menu: { screen: Menu }
});

export default App;

LoginScreen.js

import { StackNavigator } from 'react-navigation';
import React, { Component } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import LoginForm from './LoginForm';

class LoginScreen extends Component {

render() {
    return (

        <View style={styles.container}>
            <View style={styles.logoContainer}>
                <Image
                    style={styles.logo}
                    source={require('../../images/transparent.png')}
                />
                <View style={{ flexDirection: 'row' }}>
                    <Text style={styles.blueTextStyle}>Blue</Text>
                    <Text style={styles.bulkTextStyle}>Bulk</Text>
                </View>
            </View>
            <View style={styles.formContainer}>
                <LoginForm />
            </View>
        </View>


        );
}
}


export default LoginScreen;

LoginForm.js

import React, { Component } from 'react';
import {
StyleSheet,
TextInput,
TouchableOpacity,
Text,
View,
KeyboardAvoidingView,
Keyboard
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class LoginForm extends Component {

render() {
    return (

        <KeyboardAvoidingView behavior='height' style={styles.container}>

            <View style={{ flexDirection: 'row' }}>
                <Text style={styles.textStyle}>Email:</Text>
                <TextInput
                    style={styles.styleInput}
                    placeholder="user@gmail.com"
                    returnKeyType="next"
                    keyboardType="email-address"
                    onSubmitEditing={() => this.refs.password.focus()}
                />
            </View>

        <View style={{ flexDirection: 'row' }}>
            <Text style={styles.textStyle}>Password:</Text>
            <TextInput
                ref='password'
                style={styles.styleInput}
                placeholder="password"
                secureTextEntry
                returnKeyType="go"
                onSubmitEditing={Keyboard.dismiss}
            />
        </View>

            <TouchableOpacity
            style={styles.buttonContainer}
            onPress={() => this.props.navigation.navigate('Menu')} //Error here
            >
                <Text style={styles.buttonText}>Login</Text>
            </TouchableOpacity>
        </KeyboardAvoidingView>

        );
}
}

export default LoginForm;

Menu.js

import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';

class Menu extends Component {

render() {
    const { navigate } = this.props.navigation;
    return (
        <View style={styles.container}>
            <View style={styles.viewContainer}>

                <TouchableOpacity style={styles.buttonContainer}>
                    <Text style={styles.buttonText}>View Products</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.buttonContainer}>
                    <Text style={styles.buttonText}>View Discounts/Offers</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.buttonContainer}>
                    <Text style={styles.buttonText}>View Invoice History</Text>
                </TouchableOpacity>

            </View>

        </View>
        );
}
}



export default Menu;

1个回答

    最佳答案

  1. 英文原文

    You need to pass navigation props lower down to your LoginForm component.

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

    You should end up with the following result:

    enter image description here


    中文翻译

    您需要将导航道具向下传递到LoginForm组件。

    试试这个:&lt; LoginForm navigation = {this.props.navigation} /&gt;

    您应该得到以下结果:

     在此处输入图像说明

    You need to pass navigation props lower down to your LoginForm component.

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

    You should end up with the following result:

    enter image description here

    您需要将导航道具向下传递到LoginForm组件。

    试试这个:&lt; LoginForm navigation = {this.props.navigation} /&gt;

    您应该得到以下结果:

     在此处输入图像说明