Невозможно перейти к другому компоненту -> ошибка: невозможно прочитать свойство 'navigate' из неопределенного

Question

В моем react native приложении у меня есть header, и оно состоит из:

export default class foto extends Component {
.
.
.
.
static navigationOptions = {
        headerTitle: <Titulo/>,
        headerTitleStyle: {
            color: 'white',
        },
        headerRight: <MenuIcon/>,
        headerLeft: <HomeIcon/>,
        headerStyle: {
            backgroundColor: '#d87c3a'
        }
};

}

И я хочу, чтобы при нажатии на headerRight для перехода к компоненту проблема заключалась в том, что при попытке получить сообщение об ошибке: Cannot read property 'navigate' of undefined

<MenuIcon/> находится вне default class foto, но в том же файле

Код меню Menu:

class MenuIcon extends React.Component{
    render(){
        return(
            <TouchableOpacity style={{marginRight:10}}>
                <Icon name={'md-menu'} size={26} color='white'
                onPress={() => this.props.navigation.navigate('menu')}/>
            </TouchableOpacity>
        )
    }
}

Мой StackNavigator на App.js:

const AppNavigator = createStackNavigator({
  login2: {
    screen: Login2
  },
  foto: {
    screen: Foto
  },
  menu: {
    screen: Menu
  }
}, {
    initialRouteName: 'login2',
});




export default createAppContainer(AppNavigator);

Мой импорт:

import React, { Component } from 'react'
import { Text, View, ImageBackground, Image, TextInput, TouchableOpacity, TouchableHighlight, Button } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import AsyncStorage from '@react-native-community/async-storage';
import Icon from 'react-native-vector-icons/Ionicons';

Как мне решить мою проблему?

Answer 1

Вам необходимо передать навигацию на <MenuIcon/>, чтобы ваша навигация была примерно такой:

const AppNavigator = createStackNavigator({
  login2: {
    screen: Login2
  },
  foto: {
    screen: Foto,
    navigationOptions: ({ navigation }) => ({
    headerTitle: <Titulo/>,
    headerTitleStyle: {
        color: 'white',
    },
    headerRight: <MenuIcon navigation={navigation}/>,
    headerLeft: <HomeIcon/>,
    headerStyle: {
        backgroundColor: '#d87c3a'
    }
     })
  },
  menu: {
    screen: Menu
  }
}, {
    initialRouteName: 'login2',
});


export default createAppContainer(AppNavigator);

Это должно позволить вам переходить из компонента MenuIcon. Обратите внимание, что вам не нужна навигация.опций в классе Foto, и не забудьте импортировать MenuIcon и HomeIcon на страницу стекового навигатора

Надеемся, это решит вашу проблему.