React Native 错误，带有有效负载的操作'NAVIGATE'没有被任何导航器处理答案

【问题标题】：ReactNative ERROR ,The action 'NAVIGATE' with payload was not handled by any navigatorReact Native 错误，带有有效负载的操作'NAVIGATE'没有被任何导航器处理
【发布时间】：2020-09-20 07:38:13
【问题描述】：

我正在使用 ReactNative 应用程序，路由.ts

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Login from './src/screens/Login';
import Dashboard from './src/screens/Dashboard';
import {navigationRef} from './src/RootNavigation';
export const RootStack = createStackNavigator();
const Home = () => {
  return (
    <NavigationContainer ref={navigationRef}>
      <RootStack.Navigator initialRouteName={'Login'}>
        <RootStack.Screen name="Login" component={Login} />
        <RootStack.Screen name="Dashboard" component={Dashboard} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}
export default Home;

RootNavigation.ts

 import React from 'react';

export const navigationRef: any = React.createRef();

export function navigate(name: any, params: any) {
  navigationRef.current.navigate(name, params);
}

import * as Navigation from '../RootNavigation';
loginAttempt = () => {
    if (
      this.state.username === this.props.userData.username &&
      this.state.password === this.props.userData.password
    ) {
      Navigation.navigate('Dashboard ', {});
    } else {
      Alert.alert('Please try again with correct username and password');
    }
  };

我在从一个屏幕导航到另一个屏幕时遇到问题错误；带有有效负载 {"name":"Dashboard","params":{}} 的操作“NAVIGATE”未被任何导航器处理。

你有一个名为“仪表板”的屏幕吗？

如果您尝试导航到嵌套导航器中的屏幕，请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator。

【问题讨论】：

正如anthony willis muñoz 在他的回答中指出的那样，问题是导航操作中的额外空间。名称必须完全匹配。因此，您只需删除该空间即可。

标签： reactjs react-native react-navigation

【解决方案1】：

导航容器

let navigator;
<NavigationContainer 
           ref={(nav: any) => {
                navigator = nav;
                NavigationService.setNavigator(navigator);
            }}>
      <RootStack.Navigator initialRouteName={'Login'}>
        <RootStack.Screen name="Login" component={Login} />
        <RootStack.Screen name="Dashboard" component={Dashboard} />
      </RootStack.Navigator>
    </NavigationContainer>

导航服务

import { CommonActions, StackActions } from '@react-navigation/native';
const config: any = {};
export function setNavigator(nav: any) {
    if (nav) {
        config.navigator = nav;
    }
}
export function navigate(name: any, params?: any) {
    if (config.navigator && name) {
        const action = CommonActions.navigate({ name, params });
        config.navigator.dispatch(action);
    }
}
export function goBack() {
    if (config.navigator) {
        const action = CommonActions.goBack();
        config.navigator.dispatch(action);
    }
}

export function popToTop() {
    if (config.navigator) {
        const action = StackActions.popToTop();
        config.navigator.dispatch(action);
    }
}

用法

import * as NavigationService from 'path';
Navigation.navigate('Dashboard');

我认为您的方式应该也可以，但是您在此处有一个空格 Navigation.navigate('Dashboard', {}) 而不是 Navigation.navigate('Dashboard', {});

【讨论】：