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

Question

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

主菜单由 RootNavigator 处理，它是 Drawer。 login/sign up 由 AuthNavigation 处理，它是 Stack.

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

The action 'NAVIGATE' with payload {"name":"RootNavigator"} was not handled by any navigator.

Do you have a screen named '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>
  );
};

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

Answer 1

有 2 个问题：

您正在执行 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

当您有条件地定义 screens/navigators 时，React Navigation 会在您更改条件后自动渲染正确的屏幕。在这种情况下你不做 navigate。

来自身份验证流程文档：

It's important to note that when using such a setup, you don't need to navigate to the Home screen manually by calling navigation.navigate('Home'). React Navigation will automatically navigate to the Home screen when isSignedIn becomes true.

授权流程文档：https://reactnavigation.org/docs/auth-flow#how-it-will-work

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

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

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

Navigating to screen in another navigator in React Navigation 5

react-native

react-navigation

react-navigation-drawer

react-navigation-stack

react-navigation-v5