Unable to read property 'Navigate' from undefined

I'm starting with this from React Native, and programming an IOS app I got this error by doing the navigator:

  

Can not read property 'Navigate' of undefined

This is my code:

Index.ios.js

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

const Login = require('./src/components/Login')
const Dashboard = require('./src/components/Dashboard')


const IndexApp = StackNavigator({
    Login: {screen: Login},
    Dashboard: {screen: Dashboard}
})

export default class AwesomeProject extends Component {
    render(){
      return(
        <Login />
      )
    }
}

const styles = StyleSheet.create({
  contenedor:{
  flex: 1,
  justifyContent: 'center', /*Alineado Horizontalmente */
  alignItems: 'center', /*Alineado Vertical*/
  },
});

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

Login.js

'use strict'
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  TouchableHighlight,
  View,
  Alert
} from 'react-native';
import { StackNavigator } from 'react-navigation'

class login extends Component{
 static navigationOptions = {
   title: 'Login'
 }

  render() {
    return (
      <View style={styles.contenedor} >
          <Text style={styles.title}>La App chula</Text>
          <TouchableHighlight style={styles.boton} onPress={(this.onLogin.bind(this))}>
            <Text style={styles.letra}>Login</Text>
          </TouchableHighlight>
      </View>
    );
  }

  onLogin(){
    Alert.alert(
      'Acceso',
      'Te has logueado en el sistema',
      [
        {text: 'Aceptar',
        onPress:() => this.props.navigation.navigate('Dashboard')},
        {text: 'Cancelar',
        onPress:(this.cancelar.bind(this))}
      ]
    )
  }
  cancelar(){
    console.log('Login Cancelado')
  }
}

const styles = StyleSheet.create({
  contenedor:{
  flex: 1,
  /*justifyContent: 'center', /*Alineado Horizontalmente */
  alignItems: 'center', /*Alineado Vertical*/
  },
  boton:{
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
    width: 300,
    height: 30,
    marginTop: 60,
    marginBottom: 5,
    borderRadius: 5,
  },
  letra:{
    color: 'white',
  },
  title:{
    fontSize: 25,
    marginTop: 100,
  },
});

module.exports = login

Dashboard.js

'use strict'
import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet
} from 'react-native'
import { StackNavigator } from 'react-navigation'

class dashboardView extends Component{
 static navigationOptions = {
   title: 'Dashboard'
 }
    render(){
        return(
            <View>
                <Text style={styles.letras}>Soy el componente Dashboard</Text>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    letras:{
        fontSize: 25,
    },
  contenedor:{
  flex: 1,
  justifyContent: 'center', /*Alineado Horizontalmente */
  alignItems: 'center', /*Alineado Vertical*/
  },
})

module.exports = dashboardView;