Uncaught Ошибка: undefined не является объектом (оценивается как t.props.navigation.navigate) touchableHandlePress @ [native code]

Question

Я создаю компонент с именем HomeIcon и вставляю его в мой header с помощью defaultNavigationOptions> headerRight. Я добавил onPress в этот компонент, назначив this.props.navigation.navigate('Main'); с целью щелкнуть по этому элементу. Компонент загружает MainScreen, но когда я нажимаю, возникает ошибка, описанная в заголовке выше. Вот код:

import React from 'react';
import { StyleSheet, TouchableOpacity, Image, Dimensions } from 'react-native';

export default class HomeIcon extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={() => {
        this.props.navigation.navigate('Main');
      }}>
        <Image style={styles.buttonHome} source={require('../icons/home2.png')} />
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  buttonHome: {
    aspectRatio: 1,
    resizeMode: 'contain',
    height: Dimensions.get('window').width * 0.08,
    width: Dimensions.get('window').height * 0.08,
    margin: Dimensions.get('window').height * 0.018
    }
});

import React from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import Main from './source/screens/MainScreen';
import CustomCards from './source/screens/CustomCardsScreen';
import HomeIcon from './source/components/HomeIcon';

const AppNavigator = createStackNavigator ({
  'Main': {
    screen: Main,
    navigationOptions: {
      title: 'Tela Principal'
    }
  },
  'CustomCards': {
    screen: CustomCards,
    navigationOptions: {
      title: 'Cartões Personalizados'
    }
  }
}, {
  defaultNavigationOptions: {
    headerTitleStyle: {
      flexGrow: 1,
      fontWeight: 'bold',
      textAlign: 'center'
    },
    headerLeft: (null),
    headerRight: (
      <HomeIcon />
    ),
    headerStyle:{
      backgroundColor: '#7d253b'
    },
    headerTintColor: '#FFF'
  }
});

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "@types/react": "^16.8.13",
    "@types/react-native": "^0.57.43",
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-navigation": "^3.6.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

Посетите репозиторий проекта в GitHub для более подробной информации: https://github.com/Alex-Xavier/ACTIFICA

Answer 1

defaultNavigationOptions = ({ navigation }) => ({
    headerTitleStyle: {
      flexGrow: 1,
      fontWeight: 'bold',
      textAlign: 'center',
    },
    headerLeft: (null),
    headerRight: (
       <HomeIcon navigation={navigation} />
       ),
    headerStyle: {
      backgroundColor: '#7d253b',
    },
      headerTintColor: '#FFF',
   });

Answer 2

Вам необходимо передать объект навигации в этот компонент.«this.props.navigation» доступно только на экранах, которые непосредственно назначены для навигации по стеку / вкладке / ящику.В вашем случае это экраны «Main» и «CustomCards»

Компонент HomeIcon не имеет представления, что такое this.props.navigation.

Вы должны пройти «навигацию» в качестве реквизита.Примерно так:

 headerRight: ({ navigation }) => <HomeIcon  navigation={navigation}/>

Тогда в вашем HomeIcon он будет доступен как this.props.navigation.