This.props.navigation.navigate () не работает (с использованием WithNavigation)

Я реализовал всплывающий компонент в заголовке с кнопкой «Дополнительные параметры». Эта кнопка доступна только на UserProfileScreen. При нажатии на нее вы видите две кнопки: «Настройки» и «Выйти». Проблема связана с кнопкой «Настройки».

Ожидаемое поведение: Нажмите кнопку Настройки -> вызывается this.props.navigation.navigate ('SettingsNavigator') -> Отображается экран настроек

Фактическое поведение: Нажмите кнопку «Настройки» -> вызывается console.warn («перейти в настройки») и больше ничего (вы не перенаправляетесь на экран настроек).

SettingsNavigator.js

import React from 'react';
import { createStackNavigator } from 'react-navigation';

import SettingsScreen from './SettingsScreen';
import EditProfileScreen from './EditProfileScreen';
import RemoveProfileScreen from './RemoveProfileScreen';

const SettingsNavigator = createStackNavigator({
    SettingsScreen: SettingsScreen,
    EditProfile: EditProfileScreen,
    RemoveProfile: RemoveProfileScreen
}, {
    initialRouteName: 'SettingsScreen'
});

export default SettingsNavigator;

optionHeaderButton.js

import { withNavigation } from 'react-navigation';
...

class OptionsHeaderButton extends Component {

    ...

    navigateToSettings = () => {
        console.warn('go to settings')
        this.props.navigation.navigate('SettingsNavigator');
    }

    render() {
    return(
        <Menu onSelect = {value => {
            switch(value) {
                case 'Settings':
                    this.navigateToSettings();
                    break;
                case 'Logout':
                    this.onLogOutPress();
                    break;
            }
        }}>

            <MenuTrigger>
                <Icon name = 'dots-vertical' size = {24} color = {text}/>
            </MenuTrigger>

            <MenuOptions style = {optionsHeaderButtonStyle.menuWrapper}>

                <MenuOption value = {'Settings'}>
                    <View style = {optionsHeaderButtonStyle.optionWrapper}>
                        <View style = {optionsHeaderButtonStyle.optionIcon}>
                            <IconSimpleLine name = 'settings' size = {12} color = {text}/>
                        </View>
                        <Text style = {[optionsHeaderButtonStyle.option, optionsHeaderButtonStyle.lastOption]}>
                            Settings
                        </Text>
                    </View>
                </MenuOption>

                <MenuOption value = {'Logout'}>
                    <View style = {optionsHeaderButtonStyle.optionWrapper}>
                        <View style = {optionsHeaderButtonStyle.optionIcon}>
                            <IconSimpleLine name = 'logout' size = {12} color = {text}/>
                        </View>
                        <Text style = {[optionsHeaderButtonStyle.option, optionsHeaderButtonStyle.lastOption]}>
                            Logout
                        </Text>
                    </View>
                </MenuOption>

            </MenuOptions>

        </Menu>
    )
}
}

export default withNavigation(OptionsHeaderButton);

OptionsHeaderButton вложен в компонент заголовка, который вложен в компонент UserProfile.

Насколько мне известно, используя withNavigation(), я могу вызывать navigation.navigate() из любого компонента. Так почему это не работает?

Обновлено:

После расследования я обнаружил, что эта проблема связана с ошибкой React Navigation, обнаруженной в апреле 2017 года. Это означает, что вы можете использовать navigation.navigate() только внутри одного стека. Но я не могу найти никакой информации об исправлении этой ошибки.