(React-Native) undefined не является объектом (оценивается _'this.props.navigation.navigate ') - PullRequest
Новая
       16

(React-Native) undefined не является объектом (оценивается _'this.props.navigation.navigate ')

0 голосов
/ 14 сентября 2018

Я все еще новичок в реакции.Я хочу, чтобы моя кнопка входа создавала новый экран в прессе.Я пробовал несколько попыток, но, похоже, не смог обойти эту ошибку:

error screen

Что я делаю не так?

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'
    }
  },

Пропустить это

Ответы [ 4 ]

0 голосов
/ 15 сентября 2018

Я думаю, у вас есть некоторая путаница, связанная с тем, как работает стек навигации в react-native. Итак, по сути, есть два способа навигации по экрану.

  1. Объявляя его в классе StackNavigator, вы предоставляете компоненту <LoginForm/> требуемый объект навигации. После того, как вы объявите, вам нужно будет перейти к форме входа с любого экрана, например - this.props.navigation.navigate('LoginForm'). Примечание - вы сможете перемещаться только с <Account/> или <Signup/>, потому что эти два экрана в настоящее время имеют объект навигации в своей области видимости. Теперь, как только вы перейдете к компоненту формы входа, вы по существу получите объект навигации в области видимости, и ваша ошибка undefined исчезнет.

  2. Если вы решите не объявлять экран <LoginForm/> в классе StackNavigator, вам нужно будет явно передать объект navigation в качестве реквизита для компонента, например - <LoginForm navigation={this.props.navigation} />. Таким образом, каждый раз, когда вы визуализируете этот компонент, вы сможете получать навигационную информацию так же, как используете ее.

Надеюсь, это прояснит для вас:)

0 голосов
/ 15 сентября 2018 
<LoginForm />

Я не вижу, чтобы вы передавали какие-либо реквизиты в LoginForm, который ожидает this.props.navigation в onPress.

0 голосов
/ 15 сентября 2018

Ваш компонент LoginForm не имеет 'this.props.navigate', так как он не зарегистрирован ни в каком навигаторе, вы вызываете этот компонент внутри компонента 'Account', который зарегистрирован в навигаторе.Если вы хотите перемещаться внутри «LoginForm», вам нужно передать «this.props.navigation» как 

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

И внутри этого onPress в LoginForm используйте 

onPress = { ()=> this.props.myNavigation.navigate('SignUpForm) }
0 голосов
/ 14 сентября 2018

Мне трудно сказать, не видя, где вы объявили свое stafcknavigation, если вы этого не сделали, то это ссылка, чтобы узнать, как http://react -navigation% 20stack% 20navigator% 20custom% 20header

в противном случае вы, вероятно, не передаете метод навигации во вложенный компонент вот ссылка, чтобы увидеть, как это сделать навигация между компонентами в реагировать родной

...