undefined не является объектом this.props.navigation.navigate

Question

У меня появляется эта ошибка, когда я пытаюсь позвонить

 import React, { Component } from 'react';
import { Text, StyleSheet, ScrollView, View, TouchableOpacity, ActivityIndicator , Image} from 'react-native';


export default class Cards extends Component {
  constructor(props) {
    super(props);
  }

  render() {

    return (
      <View style={styles.card}>
        <View style={styles.card_header}>
          <View style={styles.dir}>

            <Image style={styles.account_img} source={require('../../../assets/png/Group_287.png')} />
            <Text style={styles.header_text}>{this.props.name}</Text>
            <View style={{ justifySelf: 'flex-end', flex: 1, marginRight: 20 }}>
            <TouchableOpacity>
              <Image style={[styles.footer_images, { alignSelf: 'flex-end' }]} source={this.props.image} />
            </TouchableOpacity>
            </View>
          </View>
          <Text style={styles.paragraph}>{this.props.text}</Text>
        </View>

        <View style={styles.card_center}>
        <Image style={{width:'100%', height:'100%'}} source={this.props.user_image}/>
        </View>

        <View style={styles.card_footer}>
          <View style={styles.image_container}>
          <TouchableOpacity>
            <Image style={styles.footer_images} source={require('../../../assets/png/like.png')} />
          </TouchableOpacity>
          </View>

          <Text style={{color: '#EEEFF0'}}>{this.props.likes}</Text>

          <View style={styles.image_container}>
          <TouchableOpacity>
            <Image style={styles.footer_images} source={require('../../../assets/png/commenta.png')} />
          </TouchableOpacity>
          </View>

          <Text style={{ color: '#EEEFF0' }}>{this.props.comments}</Text>

          <View style={{ justifySelf: 'flex-end', flex: 1, marginRight: 20 }}>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('Share')}>
            <Image style={[styles.footer_images, { alignSelf: 'flex-end' }]} source={require('../../../assets/png/condividi.png')} />
          </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}

А вот класс, по которому я хочу перейти

import React, { Component } from 'react';
import { Text, StyleSheet, ScrollView, View, TouchableOpacity,Image, ActivityIndicator } from 'react-native';


export default class Share extends Component {
  constructor() {
    super();
    this.state = {
    }
  }

  render() {
    return(
      <View style={{height:20, backgroundColor:'red'}}></View>
    )
}


}

Маршруты:

  Share: {
      screen: Share,
      navigationOptions: {
        headerLeft: HeaderLeft,
        headerRight: HeaderRight,
        headerStyle: {
          elevation: 0,
          shadowOpacity: 0,
          borderBottomWidth: 0,
        }
      }
    },

Класс, который я хочу разместить, - это класс, который экспортируется в другой компонент, чтобы иметь возможность создавать компонент того же типа. Если я использую функцию навигации в другом классе, который нигде не экспортируется, все идет хорошо. Почему это происходит и, пожалуйста, помогите мне, как решить?