Question

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

预期的行为： 按下设置按钮->调用this.props.navigation.navigate（'SettingsNavigator'）->显示“设置屏幕”

实际行为：按下“设置”按钮-> console.warn（“转到设置”）被调用，仅此而已（您不会重定向到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组件中的标头组件。

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

更新：

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

Answer 1

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

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

Answer 2

尝试一下：

import { NavigationActions, withNavigation } from 'react-navigation';



navigateToSettings = () => {
  const navigateAction = NavigationActions.navigate({ routeName: 'SettingsScreen' });
  this.props.navigation.dispatch(navigateAction);
}

Answer 3

我遇到了这个问题，但是我使用堆栈导航和抽屉式导航（以及用于身份验证的切换导航）对App.js进行了稍微不同的布线-大部分遵循了react导航文档：

App.js

const AuthStack = createStackNavigator({ Login: Login }, { headerMode: 'none' });
const ActivityStack = createStackNavigator({ Activity: ActivityScreen}, {headerMode: 'none'});

// setup my routing & config here

export default createAppContainer(createSwitchNavigator(
{
   Auth: AuthStack,
   ActivityStack: ActivityStack,
},
{
   intitalRouteName: 'Auth',
},
));

在屏幕上，我要从中导航，所以我要像这样绑定构造函数（以绑定导航功能）：

FirstScreen.js

export default class FirstScreen extends React.Component {
  constructor(props) {
    super(props);

    this.navigateToScreen = this.navigateToScreen.bind(this);
  }

state = {
   // state items here
}

  navigateToScreen(screenName) {
    this.props.navigation.navigate(screenName);
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress= 
              {this.navigateToScreen("Activity")}>
          <Text style={styles.loginText}>
            ADD ACTIVITY
          </Text>
        </TouchableOpacity>
      </View>

请注意我如何调用导航，我只传递了我先前在App.js文件中提供的路由别名：

    Activity: ActivityStack,

所以我会从调用点写this.navigateToScreen("Activity")，而不是通过屏幕名称或堆栈名称来传递别名。

这可以正确导航到屏幕，并利用我之前在App.js中定义的堆栈导航。

希望这是有道理的（父级子级是通过嵌套各种导航功能（如开关，堆栈和抽屉）来实现所需的结果的。

Answer 4

在react-navigation版本中的

版本：5.x withNavigation不起作用。要解决此问题，请尝试此。

import { useNavigation } from '@react-navigation/native';
const navigation = useNavigation();
navigation.navigate("DetailsScreen")

不需要在withNavigation中扭曲组件。

希望这会有所帮助。

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

4 个答案: