Question

我正在使用ReactNative应用程序， route.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);
}

Login.tsx

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。

Answer 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'，{}）;

ReactNative ERROR，带有有效负载的动作“ NAVIGATE”未由任何导航器处理

1 个答案: