React-Native:TypeError:undefined不是对象（正在计算'；this.props.navigation.navigate'；）

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

因此，我的代码以index.js开始，并在那里注册应用程序组件。应用程序组件只包含堆栈导航路由。它加载LoginScreen组件（显示应用程序的徽标、背景和名称），然后加载LoginForm组件。登录按钮上没有身份验证，我只需要在按下登录按钮时加载菜单组件。它给出了TypeError:undefined不是对象（计算'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;

从'react navigation'导入{StackNavigator}；
从“React”导入React，{Component}；
从“react native”导入{样式表、视图、文本、图像}；
从“/LoginForm”导入LoginForm；
类LoginScreen扩展组件{
render（）{
返回(
蓝色
大部分
);
}
}
导出默认登录屏幕；

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;

import React，{Component}来自'React'；
进口{
样式表，
文本输入，
可触摸不透明度，
文本，
看法
键盘避免了gView，
键盘
}从“反应本机”；
从“react navigation”导入{StackNavigator}；
类LoginForm扩展组件{
render（）{
返回(
电邮：
this.refs.password.focus（）}
/>
密码：
this.props.navigation.navigate（'Menu'）}//此处出错
>
登录
);
}
}
导出默认登录信息；

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;

import React，{Component}来自'React'；
从“react native”导入{样式表、视图、文本、TouchableOpacity}；
从“react navigation”导入{StackNavigator}；
类菜单扩展组件{
render（）{
const{navigate}=this.props.navigation；
返回(
查看产品
查看折扣/优惠
查看发票历史记录
);
}
}
导出默认菜单；

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

试试这个：

您应该得到以下结果：

---

尝试将

这个.props.navigation

从

LoginScreen

传递到

LoginForm

。下面的答案有效。谢谢btwThanks@Antoni4，你真的救了我！：-）谢谢这节省了我的时间。