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

Question

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

[主菜单由作为RootNavigator的Drawer处理。登录/注册由作为AuthNavigation的Stack处理。

成功登录后，我试图将用户发送到Home下的RootNavigator屏幕。换句话说，我正在尝试通过发出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>
  );
};
知道我在做什么错吗？我想使用最干净的方法来处理此问题。

我正在React Native应用程序中使用新的React Navigation 5。主菜单由作为抽屉的RootNavigator处理。登录/注册由作为堆栈的AuthNavigation处理。我是...

Answer 1

有2个问题：