reactjs - 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 有关。这意味着你只能在一个 Stack 内使用 navigation.navigate() 。但我找不到任何有关修复此错误的信息。

Answer 1

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

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