this.props.navigation.navigate() 不起作用（使用 WithNavigation）

Question

我在带有更多选项按钮的标题中实现了一个弹出组件。此按钮仅在 上可用UserProfileScreen。当您按下它时，您会看到两个按钮：“设置”和“注销”。该问题与设置按钮有关。

预期行为： 按设置按钮 -> this.props.navigation.navigate('SettingsNavigator') 被调用 -> SettingsScreen 显示

实际行为： 按设置按钮 -> console.warn('go to settings') 被调用，仅此而已（您不会被重定向到 SettingsScreen）。

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 组件中的 Header 组件。

据我所知，使用withNavigation()我可以navigation.navigate()从任何组件调用。那为什么不起作用呢？

更新：

经过调查，我发现这个问题与 2017 年 4 月发现的 React Navigation 的 bug 有关。 这意味着您navigation.navigate()只能在一个 Stack 内使用。但是我找不到有关修复此错误的任何信息。

Answer 1

您需要传递屏幕名称而不是导航器。

this.props.navigation.navigate('SettingsSecreen');