理解 "未定義はオブジェクトではありません（ 'this.props.navigation.navigate）

Question

タイトルが付いたボタンをクリックすると、未定義のオブジェクト（' this.props.navigation.navigate） 'が表示されません。 ChatScreen画面に私を連れて来ると思われる "Lucyとのチャット"。

すべてのコードは、私が使用しているApp.jsファイル内にあり、アンドロイドと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); 

Answer 1

あなたは何が渡さされていないので、navigation小道具にアクセスできませんあなたのfirstapp部品を輸出しています。代わりにナビゲータコンポーネントfirstappNavをエクスポートする必要があります。

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

Answer 2

これは、firstappコンポーネントでpropsオブジェクトが定義されていないためです。 Propsにアクセスするには、コンストラクターをオーバーライドする必要があります。 Read this