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

Question

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

主菜单由 RootNavigator 处理这是一个 Drawer .登录/注册由 AuthNavigation 处理这是一个 Stack .

我正在尝试将用户发送到 Home下屏RootNavigator登录成功后。换句话说，我试图通过发出 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'}); ，这意味着导航到 Home嵌套在导航器中的屏幕 RootNavigator屏幕。但没有名为 RootNavigator 的屏幕，您有一个名为 RootNavigator 的组件, 但是 navigate需要一个网名。

看看你的代码，你没有嵌套的导航器，两个导航器仍然在根，只是有条件地呈现。所以你通常会做 navigation.navigate('Home')用于导航。
嵌套工作原理以及嵌套时结构的外观示例: https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator

当您有条件地定义屏幕/导航器时，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成功登录后，因为它会在您更新条件时自动发生。