Question

我是React Native的新编程人员，我的代码遇到了这个问题，我试图做一个Splash屏幕，然后我要进行一次Login，将我重定向到另一个屏幕。

启动屏幕运行良好，但是当我进入登录屏幕并按“ Entrar”按钮时，它崩溃并显示消息。

`



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>
    );
  }
}`

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> ); } }`

Answer 1

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

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

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

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

import { withNavigation } from 'react-navigation';


export Default withNavigation(Login);

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

未定义不是对象（“评估_this.props.navigation.navigate”）

1 个答案: