React Native:TypeError:undefined不是一个对象(评估'this.props.navigation.navigate')

问题描述

作为react-native的初学者，我无法在代码中找出问题所在.通过在互联网上阅读，我有一个可能是约束性的问题.

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.

因此，我的代码以index.js开头，并在那里注册了App组件.该应用程序组件仅包含堆栈导航路线.它加载LoginScreen组件(显示徽标，背景和应用程序的名称)，而后者又加载LoginForm组件. 登录"按钮上没有身份验证，我唯一需要做的就是在按登录"按钮时加载了菜单组件.它给出了TypeError:undefined不是一个对象(正在评估'this.props.navigation.navigate')

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

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

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="[email protected]"
                    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;

推荐答案

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

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

尝试一下:<LoginForm navigation={this.props.navigation} />

您应该得到以下结果:

这篇关于React Native:TypeError:undefined不是一个对象(评估'this.props.navigation.navigate')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！