undefined 不是一个对象('评估 _this.props.navigation.navigate') [英] undefined is not an object ('evaluating _this.props.navigation.navigate')

问题描述

我是使用 React Native 编程的新手，我的代码遇到了这个问题，我尝试做一个启动画面，然后我想进行一个登录，将我重定向到另一个屏幕.

I'm new programing with React Native and I got this issue with my code, I'm try to do a Splash screen and after that I want to make a Login that redirect me to another screen.

启动画面运行良好，但当我进入登录屏幕并按下Entrar"按钮时，它崩溃并显示消息.

The Splash screen run well but when I'm in the Login Screen and I push the "Entrar" button, it crashes and shows the message.

<代码>`

import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset, SplashScreen } from 'expo';

import Splash from './screens/Splash';
import Login from './screens/Login';
import ForgotPass from './screens/ForgotPass';
import Home from './screens/Home';

App.js

export default class App extends React.Component
{
  componentWillMount()
  {
    this.setState({
      view: <Splash />
    })

    setTimeout(() => {
      this.setState({
        view: <Login />
      })
    }, 3000)
  }

  render()
  {
    return(
      this.state.view
    )
  }
}

////////////////////////////////////////////////////////////

Login.js

import React from 'react';
import { View, BackHandler } from 'react-native';
import { Card, Button, FormLabel, Text, FormInput } from 'react-native-elements';
import { createStackNavigator, navigate } from 'react-navigation';

export default class Login extends React.Component
{
  static navigationOptions = {
    title: 'Iniciar sesión',
    headerLeft: null,
  }

  componentDidMount()
  {
    BackHandler.addEventListener('hardwareBackPress', function()
    {
      return true;
    });
  }

  render()
  {
    return (
      <View style={{ paddingVertical: 20 }}>
        <Card>
          <FormLabel>Nombre de Usuario</FormLabel>
          <FormInput placeholder='NombreUsuario' />
          <FormLabel>Contraseña</FormLabel>
          <FormInput secureTextEntry placeholder='Contraseña' />

          <Button
            buttonStyle={{ marginTop: 20 }}
            backgroundColor='#03A9F4'
            title='Entrar'
            onPress={() => this.props.navigation.navigate('Home')}
          />
        </Card>
        <View style={{ paddingVertical: 20 }}>
          <Button
            title="¿Olvidó su contraseña?"
            onPress={() => this.props.navigation.navigate('ForgotPass')}
          />
        </View>
      </View>
    );
  }
}`

推荐答案

你必须在App.js文件中传递导航道具

you have to pass navigation props in App.js file

componentWillMount()
{
  this.setState({
    view: <Splash />
  })

  setTimeout(() => {
    this.setState({
      view: <Login navigation={this.props.navigation} />
    })
  }, 3000)
}

或者你可以在 Login.js 文件中使用 withNavigation

or you can use withNavigation in Login.js file

import { withNavigation } from 'react-navigation';


export Default withNavigation(Login);

https://reactnavigation.org/docs/en/with-navigation.html 此链接将帮助您了解有关反应导航中的 withNavigation 的更多信息

https://reactnavigation.org/docs/en/with-navigation.html this link will help you to learn more about withNavigation in react navigation

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