javascript - React Native - ナビゲーションの問題「未定義はオブジェクトではありません (this.props.navigation.navigate)」

Question

このチュートリアルhttps://reactnavigation.org/docs/intro/ に従っていますが、少し問題が発生しています。

シミュレーター/エミュレーターではなく、毎回アプリをレンダリングするために Expo Client アプリを使用しています。

私のコードは下に表示されます。

私はもともと「ChatScreen」コンポーネントの上に定義された「SimpleApp」constを持っていましたが、次のエラーが発生しました：

Route 'Chat' は画面を宣言する必要があります。例: ...など

そのため、SimpleApp の宣言を「AppRegistry」のすぐ上に移動し、新しいエラーにフラグを立てました

要素の型が無効です: 文字列が必要です.....コンポーネントをエクスポートするのを忘れた可能性があります..など

チュートリアルでは、Expo アプリで実行しているという事実と関係があると思われるコンポーネントに「export default」というキーワードを追加しませんでしたか? そのため、「ホームスクリーン」に「デフォルトのエクスポート」を追加すると、エラーはなくなりました。

（以下のコードに基づいて）取り除くことができないと思われる新しいエラーは次のとおりです。

undefined はオブジェクトではありません (「this.props.navigation.navigate」を評価)

「const {navigate}」の周りの「{}」を削除しない限り、それを取り除くことはできませんが、ホーム画面からボタンを押すとナビゲーションが壊れます

import React from 'react';
import {AppRegistry,Text,Button} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}



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

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);