在 React Navigation 5 中的另一个导航器中导航到屏幕答案

【问题标题】：Navigating to screen in another navigator in React Navigation 5在 React Navigation 5 中的另一个导航器中导航到屏幕
【发布时间】：2020-08-24 12:36:00
【问题描述】：

我在我的 React Native 应用程序中使用了新的 React Navigation 5。

主菜单由RootNavigator 处理，即Drawer。登录/注册由AuthNavigation 处理，Stack。

成功登录后，我正尝试将用户发送到RootNavigator 下的Home 屏幕。换句话说，我试图通过发出navigation.navigate('RootNavigator', {screen: 'Home'}); 将用户发送到另一个导航器下的屏幕，但我收到一个错误消息：

有效载荷 {"name":"RootNavigator"} 的操作 'NAVIGATE' 不是由任何导航器处理。

你有一个名为“RootNavigator”的屏幕吗？

这就是我的App.js 的样子：

const App = () => {

  const [isLoading, setIsLoading] = useState(true);
  const [isAuthenticatedUser, setIsAuthenticatedUser] = useState(false);

  useEffect( () => {

    // Check for valid auth_token here
    // If we have valid token, isLoading is set to FALSE and isAuthenticatedUser is set to TRUE
  });

  return (
    <Provider store={store}>
      <PaperProvider>
        <NavigationContainer>
          {
            isLoading
            ? <SplashScreen />
            : isAuthenticatedUser ? <RootNavigator /> : <AuthNavigator />
          }
        </NavigationContainer>
      </PaperProvider>
    </Provider>
  );
};

这是我的AuthNavigator，这是Stack：

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

// Components
import Login from '../../login/Login';

const AuthStack = new createStackNavigator();

export const AuthNavigator = () => {
    return(
        <AuthStack.Navigator>
            <AuthStack.Screen name="LoginScreen" component={Login} />
        </AuthStack.Navigator>
    );
};

这是RootNavigator，这是Drawer：

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';

// Components
import Dashboard from '../../home/Dashboard';
import DrawerContent from './DrawerContent';
import ToDoList from '../../active_lists/to_do_lists/ToDoList';

const MainMenuDrawer = createDrawerNavigator();

export const RootNavigator = () => {

  return (
    <MainMenuDrawer.Navigator drawerContent={(navigation) => <DrawerContent navigation={navigation} />}>
      <MainMenuDrawer.Screen name="Home" component={Dashboard} />
      <MainMenuDrawer.Screen name="To Do List" component={ToDoList} />
    </MainMenuDrawer.Navigator>
  );
};

知道我在这里做错了什么吗？我想使用最干净的方法来处理这个问题。

【问题讨论】：

您是否尝试过从子组件调用 this.props.navigation.dispatch(DrawerActions.openDrawer()) ？我知道如果你想从一个嵌套导航器导航到另一个，你应该有一个父导航器（堆栈）。一定有一个大父母。

标签： react-native react-navigation react-navigation-stack react-navigation-drawer react-navigation-v5

【解决方案1】：

有两个问题：

您正在执行navigation.navigate('RootNavigator', {screen: 'Home'});，这意味着在嵌套在RootNavigator 屏幕内的导航器中导航到Home 屏幕。但是没有名为RootNavigator 的屏幕，您有一个名为RootNavigator 的组件，但navigate 需要一个屏幕名称。

查看您的代码，您没有嵌套导航器，两个导航器仍位于根目录，只是有条件地呈现。因此，您通常会使用navigation.navigate('Home') 进行导航。

嵌套如何工作以及嵌套时结构的外观示例：https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator

当您有条件地定义屏幕/导航器时，React Navigation 会在您更改条件后自动渲染正确的屏幕。在这种情况下，您不要使用navigate。

来自身份验证流程文档：

请务必注意，在使用此类设置时，您无需通过调用navigation.navigate('Home') 手动导航到Home 屏幕。当 isSignedIn 变为 true 时，React Navigation 将自动导航到 Home 屏幕。

身份验证流程文档：https://reactnavigation.org/docs/auth-flow#how-it-will-work

所以您需要做的是更改组件中的isAuthenticatedUser 状态。您可以按照文档中的指南获取使用 React 上下文的示例，但如果您使用的是 Redux，请将此状态移动到 Redux 或您使用的任何其他状态管理库。

最后，在成功登录后删除navigation.navigate，因为它会在您更新条件时自动发生。

【讨论】：