(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

我认为您对react-native 中导航堆栈的工作方式有些困惑。因此，基本上有两种导航到屏幕的方式。

1. 通过在StackNavigator 类中声明它，您将为<LoginForm/> 组件提供所需的导航对象。有一次，声明您需要从任何屏幕导航到登录表单 - 例如 - this.props.navigation.navigate('LoginForm')。 注意 - 您将只能从<Account/> 或<Signup/> 导航，因为这两个屏幕当前在其范围内拥有导航对象。现在，一旦您导航到登录表单组件，您实际上将在范围内拥有导航对象，并且您的 undefined 错误将消失。

2. 如果您决定不在StackNavigator 类中声明<LoginForm/> 屏幕，则需要将navigation 对象作为道具显式传递给组件，例如-<LoginForm navigation={this.props.navigation} />。因此，无论何时渲染此组件，您都能够以与使用它相同的方式获取导航道具。

希望它能为你解决问题:)

Answer 3

如果你没有看到你在哪里声明了你的 stafcknavigation，我很难说出来，那么这是了解 http://react-navigation%20stack%20navigator%20custom%20header的链接

否则您可能没有将导航方法传递给嵌套组件 这是一个链接，看看如何做到这一点navigation between component in react native

Answer 4

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

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

在 LoginForm 的 onPress 里面使用

onPress = { ()=> this.props.myNavigation.navigate('SignUpForm) }