理解“未定义不是对象（'this.props.navigation.navigate）”答案

【问题标题】：understanding "undefined is not an object('this.props.navigation.navigate)"理解“未定义不是对象（'this.props.navigation.navigate）”
【发布时间】：2017-11-15 22:22:29
【问题描述】：

当我单击标题为“与露西聊天”的按钮时，我收到错误“未定义不是对象（'this.props.navigation.navigate）”，该按钮应该将我带到 ChatScreen 屏幕。

所有这些代码都在我正在使用的 App.js 文件中，该文件被导出到 android 和 ios 文件中。

我收到此错误的任何原因？谢谢！

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


export default class firstapp extends Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Image source={require('./Packit_title.png')} />
        <TextInput
          style={styles.account}
          />       
        <TextInput
          style={styles.account}
        />

        <View style={styles.button}>
          <Button
            title="Login" 
            color="#c47735"

          /> 
          <Button 
            title="Sign Up" 
            color="#c47735"
          /> 
        </View>

        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />

      </View>
    );
  }
}


class ChatScreen extends Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const firstappNav = StackNavigator({
  Home: { screen: firstapp },
  Chat: { screen: ChatScreen },
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f49542',
  },
  account: {
    backgroundColor: '#ffffff',
    height: 40, 
    borderColor: 'gray', 
    borderWidth: 1,
    marginBottom: 10,
    width: 200
  },
  button: {
  flexDirection: 'row',
  }
});

AppRegistry.registerComponent('firstapp', () => firstapp);

【问题讨论】：

这是因为在 firstapp 组件中未定义 props。您必须重写其构造函数才能访问道具。阅读：facebook.github.io/react/docs/react-component.html#constructor

标签： javascript android ios reactjs react-native

【解决方案1】：

您正在导出您的 firstapp 组件，该组件无权访问 navigation 属性，因为没有任何东西传递给它。您需要导出导航器组件firstappNav。

AppRegistry.registerComponent('firstapp', () => firstappNav);

【讨论】：

【解决方案2】：

这是因为 props 对象在 firstapp 组件中未定义。您必须重写其构造函数才能访问道具。 Read this

【讨论】：