导航时获取未定义不是对象错误

Question

我用react native编写了一个简单的登录应用程序。当我尝试使用StackNaviagator导航到其他组件时，出现以下错误：

我正在使用以下链接中的代码：Sample Link。我正在使用const Appnavigator定义我需要导航到的新组件。我还使用this.props.navigation将prop传递到堆栈导航器中的每个屏幕组件。我该如何解决该错误？

我的代码是：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableHighlight,
  Image,
  Alert
} from 'react-native';
import { StackNavigator } from 'react-navigation';

import Forgot from '../src/Forgot';
import Home from '../src/Home';
import Register from '../src/Register';

const AppNavigator = StackNavigator({
  Forgot: { screen: Forgot },
  Home: { screen: Home },
  Register: { screen: Register }
});

export default class LoginView extends Component {

  constructor(props) {
    super(props);
    state = {
      email   : '',
      password: '',
    }
  }

  onLoginButton = () => {
    // Alert.alert("Alert", "Login pressed");
    this.props.navigation.navigate('Home');
  }

  onForgotText = () => {
    // Alert.alert("Alert", "Forgot pressed"); 
    this.props.navigation.navigate('Forgot');
  }

  onRegister = () => {
    // Alert.alert("Alert", "Register clicked")
    this.props.navigation.navigate('Register');
  }

  // onClickListener = (viewId) => {
  //   Alert.alert("Alert", "Button pressed "+viewId);
  // }

  render() {
    return (
      <View style={styles.container}>
      <AppNavigator />
        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/message/ultraviolet/50/3498db'}}/>
          <TextInput style={styles.inputs}
              placeholder="Email"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
        </View>

        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}/>
          <TextInput style={styles.inputs}
              placeholder="Password"
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(password) => this.setState({password})}/>
        </View>

        <TouchableHighlight style = { [styles.buttonContainer, styles.loginButton] } onPress = { () => this.onLoginButton() }>
          <Text style = { styles.loginText }>Login</Text>
        </TouchableHighlight>

        <TouchableHighlight style = { styles.buttonContainer } onPress = { () => this.onForgotText() }>
            <Text>Forgot your password?</Text>
        </TouchableHighlight>

        <TouchableHighlight style = { styles.buttonContainer } onPress = {() => this.onRegister()}>
            <Text>Register</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#DCDCDC',
  },
  inputContainer: {
      borderBottomColor: '#F5FCFF',
      backgroundColor: '#FFFFFF',
      borderRadius:30,
      borderBottomWidth: 1,
      width:250,
      height:45,
      marginBottom:20,
      flexDirection: 'row',
      alignItems:'center'
  },
  inputs:{
      height:45,
      marginLeft:16,
      borderBottomColor: '#FFFFFF',
      flex:1,
  },
  inputIcon:{
    width:30,
    height:30,
    marginLeft:15,
    justifyContent: 'center'
  },
  buttonContainer: {
    height:45,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom:20,
    width:250,
    borderRadius:30,
  },
  loginButton: {
    backgroundColor: "#00b5ec",
  },
  loginText: {
    color: 'white',
  }
});

Answer 1

反应导航使用道具的方法进行导航。

因此，您不能在子组件中使用导航道具！！！ 将导航道具从容器传递到组件！

您可以通过“ console.log（this.props）”调试代码

“ this.props.navigation”必须具有导航方法。

您必须检查“ this.props.navigation”必须存在！

// If there is no this.props.navigate
// parent component
<LoginView customeNavigate={this.props.navigation.navigate}/>

// LoginView
  onForgotText = () => {
    () => this.props.customNavigate.navigate('Forgot');
  }

Answer 2

未在AppNavigator中定义LoginView。