正在尝试未定义的导航不在对象上。状态

我试图做出一个简单的本地导航,但我得到了一个错误。

https://facebook.github.io/react-native/docs/navigation

我需要做一个应用程序与登录,发送数据到服务器,检索数据和搜索,但我不知道如何使一个良好的导航屏幕。

但这会导致错误,有人能帮我吗?

import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import App from './sections/main';

AppRegistry.registerComponent(appName, () => App);

main.js

import React, { Component } from 'react';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import HomeScreen from './home';
import ProfileScreen from './profile';

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

const App = createAppContainer(MainNavigator);

export default App;

home.js

import React, { Component } from 'react';
import Dimensions from 'Dimensions';
import {
    StyleSheet,
    Text,
    Button,
    TouchableOpacity, ImageBackground, Image, ScrollView } from 'react-native';
import bgSrc from '../images/fondo3.jpg';
import logoImg from '../images/icontime1.png';
import plusImg from '../images/plus.png';
import editImg from '../images/iconedit1.png';

export default class home extends React.Component {
    static navigationOptions = {
      title: 'Bienvenido',
    };
    render() {
        const {navigate} = this.props.navigation;
        return (
            <ScrollView contentContainerStyle={styles.container}>
                <ImageBackground source={bgSrc} style={styles.picture}>
                    <Button
                        title="Go to Jane's profile"
                        onPress={() => navigate('Profile', {name: 'Jane'})}
                    />
                </ImageBackground>
            </ScrollView>
        );
    }
}

import React, { Component } from 'react';
import Dimensions from 'Dimensions';
import {
    StyleSheet,
    Text,
    Button,
    TouchableOpacity, ImageBackground, Image, ScrollView } from 'react-native';
import bgSrc from '../images/fondo3.jpg';
import logoImg from '../images/icontime1.png';
import plusImg from '../images/plus.png';
import editImg from '../images/iconedit1.png';

export default class profile extends React.Component {
    static navigationOptions = {
      title: 'Profile',
    };
    render() {
        const {navigate} = this.props.navigation;
        return (
          <ScrollView contentContainerStyle={styles.container}>
              <ImageBackground source={bgSrc} style={styles.picture}>
                  <Button
                      title="Go to Jane's Home"
                      onPress={() => navigate('Home')}
                  />
              </ImageBackground>
          </ScrollView>
        );
    }
  }