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

Question

React Navigation

我正在尝试了解react native，而我在React导航上却陷于困境，当我尝试对其进行修复时，问题始终出在this.props.navigation.navigate上。

主屏幕代码

import React, {Component} from 'react';
import {TouchableOpacity,Button,Text} from 'react-native';

export default class HomeScreen extends Component {
  render() {
    const {navigate} = this.props.navigation;
    return (
      <TouchableOpacity onPress={() => this.props.navigation.navigate('ProfileScreen')}>
        <Text>Go to Jane's profile</Text>
      </TouchableOpacity>
    );
  }
}

导航代码

import {TouchableOpacity,Button,Text} from 'react-native';
import {createStackNavigator} from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const MainNavigator = createStackNavigator({
  HomeScreen: {screen: HomeScreen},
  ProfileScreen: {screen: ProfileScreen},
});


export default MainNavigator;

个人资料代码

import React,{Component} from 'react';
import {TouchableOpacity,Button,Text} from 'react-native';

export default class ProfileScreen extends Component {
  render() {
    return (
      <Text>Hallo </Text>
    );
  }
}