（React-Native）undefined不是对象（评估_'this.props.navigation.navigate'）

Question

我仍然是一个反应的新手。我想让我的登录按钮在印刷机上创建一个新的屏幕。我尝试了多次尝试但似乎无法通过此错误：

我做错了什么？

LoginForm.js：

    import React, { Component } from 'react';
    import { TextInput, Text, View, StyleSheet, TouchableOpacity } from  'react-native';
    import { StackNavigator } from 'react-navigation';
    import { Button, CardSection, Input, Spinner } from './common';
    import Account from './screens/Account';
    import SignUpForm from './SignUpForm';

    class LoginForm extends Component {
        render() {
            return (
              <View style={styles.container}>
                <TextInput
                  placeholder="Username or email"
                  placeholderTextColor='white'
                  returnKeyType='next'
                  style={styles.input}
                  keyboardType="email-address"
                  onSubmitEditing={() => this.passwordInput.focus()}
                />

                <TextInput
                  secureTextEntry //turns text into *** good for passwords
                  label="Password"
                  placeholder="password"
                  placeholderTextColor='white'
                  secureTextEntry
                  returnKeyType='go'
                  style={styles.input}
                  ref={(input) => this.passwordInput = input}
             />
             <TouchableOpacity style={styles.buttonContainer}>
             <Text style={styles.buttonText}>LOGIN</Text>
             </TouchableOpacity>
             <Text style={styles.textStyle}> Need help logging in?{'\n'}
             or
             </Text>
             <View style={styles.divider} />
             <TouchableOpacity
             style={styles.buttonContainer}
             onPress={() => this.props.navigation.navigate('SignUpForm')}
             >
            <Text style={styles.buttonText}>Sign Up</Text>
            </TouchableOpacity>
            </View>
            );
        }
    }
    export default LoginForm;

**Account.js:**

    import React from 'react';
    import { View, Image, TouchableOpacity, Text, TextInput } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import { Card, Button, Spinner, CardSection } from '../common';
    import LoginForm from '../LoginForm';


    class Account extends React.Component {
        static navigationOptions = {
            tabBarLabel: 'Account'
        }
        render() {
            return (<View style={styles.containerStyle}>
              <Card>
                <View style={styles.logoContainer}>
                  <Image style={styles.logo} source= . 
            {require('../../Images/ShoeJackCityLogo.png')}/>
                </View>
                <View style={styles.formContainer}>
                  <LoginForm />
                </View>
              </Card>
            </View>);
        }
    }
    export default Account;

**SignUpForm.js:**

    import React, { Component } from 'react';
    import { TextInput, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
    import { Button, CardSection, Input, Spinner } from './common';
    import router from '../../config/router';


    class SignUpForm extends Component {
        render() {
            return (
              <View style={styles.container}>
                <TextInput
                  placeholder="Username or email"
                  placeholderTextColor='white'
                  returnKeyType='next'
                  style={styles.input}
                  keyboardType="email-address"
                  onSubmitEditing={() => this.EmailInput.focus()}
/>
<TextInput
placeholder="Email"
placeholderTextColor='white'
returnKeyType='next'
style={styles.input}
keyboardType="email-address"
onSubmitEditing={() => this.passwordInput.focus()}
/>
<TextInput
secureTextEntry //turns text into *** good for passwords
label="Password"
placeholder="password"
placeholderTextColor='white'
secureTextEntry
returnKeyType='go'
style={styles.input}
ref={(input) => this.passwordInput = input}
/>
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.buttonText}>Register</Text>
</TouchableOpacity>
</View>
);
}
}
export default SignUp;
import React from 'react';
import { TabNavigator, StackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

**Router.js**

import Tournaments from '../components/screens/Tournaments';
import Account from '../components/screens/Account';
import Artists from '../components/screens/Artists';
import Shop from '../components/screens/Shop';
import SignUpForm from '../components/SignUpForm';

export const AccountStack = StackNavigator({
  Account: {
    screen: Account,
    navigationOptions: {
    title: 'Account',
    headerBackTitle: null,
  },
  SignUpForm: {
    screen: SignUpForm,
    navigationOptions: {
      title: 'Register'
    }
  },

忽略这个：jsksjkjdkfjkdfkjkdjskfjskjfjksjkjfkjsjfkjskfsjfjsjfksjfjfskfjkskjfjkjskjfjjksfjksfjkfjkfjssfjkfksskjfjsfjk

Answer 1

<LoginForm />

我没有看到你将任何道具传递给LoginForm，它希望在onPress中使用this.props.navigation。

Answer 2

如果你没有看到你宣布你的stafcknavigation，我很难告诉你，这是学习如何 http://react-navigation%20stack%20navigator%20custom%20header的链接

否则你可能没有将导航方法传递给嵌套组件这里是一个链接，看看如何做到这一点qazxsw poi

Answer 3

您的LoginForm组件没有'this.props.navigate'，因为它没有在任何导航器中注册，您正在调用注册到导航器的“帐户”组件中的该组件。如果你想在'LoginForm'里面导航，你需要传递'this.props.navigation'之类的

navigation between component in react native

在LoginForm中使用onPress

<LoginForm myNavigation = {this.props.navigation} />

Answer 4

我认为你有一些关于导航堆栈如何在onPress = { ()=> this.props.myNavigation.navigate('SignUpForm) } 中工作的混乱。因此，基本上有两种导航到屏幕的方法。

1. 通过在react-native类中声明它，您将为StackNavigator组件提供所需的导航对象。一旦宣布你需要从任何屏幕导航到登录表单 - 比如 - <LoginForm/>。注意 - 您将只能从this.props.navigation.navigate('LoginForm')或<Account/>导航，因为这两个屏幕当前在其范围内拥有导航对象。现在，一旦您导航到登录表单组件，您将在范围内实际拥有导航对象，并且您的<Signup/>错误将消失。
2. 如果您决定不在undefined类中声明<LoginForm/>屏幕，则需要将StackNavigator对象明确地作为道具传递给组件，例如 - navigation。因此，无论何时渲染此组件，您都能够以与使用它相同的方式获取导航道具。

希望它为你清除的东西:)