Преобразование StackNavigator из v4 в v5 Реагирует на собственную ошибку для аутентификации

Question

Моя цель - конвертировать стековый навигатор React-Native из версии 4-5. Я столкнулся с некоторыми проблемами, и любая помощь будет высоко оценена.

ОШИБКА: " Действие 'NAVIGATE' с полезной нагрузкой {" name ":" Auth "} не было обработано ни одним навигатором У вас есть экран с именем 'Auth'? Если вы пытаетесь перейти к экрану во вложенном навигаторе, см. https://reactnavigation.org/docs/nesting-navigators.html#navigating -to-a-screen-in-a-nested-navigator ."

Навигация по потоку: для аутентификации пользователя (с помощью firebase) и go для компонента, который содержит уже работающий нижний вкладка-навигатор. Экран загрузки -> войти -> зарегистрироваться -> в приложении (как компонент).

Этот навигатор находится в файле app.jsx, здесь код. Примечание : Я прокомментировал стековые навигаторы v4, которые отлично работают. Опять же, я хочу преобразовать это в последнюю версию 5.

import React from 'react'
// import { createAppContainer, createSwitchNavigator } from 'react-navigation'; //(v4 only)
// import { createStackNavigator } from 'react-navigation-stack'; //(v4 only)

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// screens imports 
import LoadingScreen from './screens/LoadingScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import CategorySignin from './screens/CategorySignin';
import FeedScreen from './screens/FeedScreen';

// tab navigator 
import { AppTabs } from './AppTabs';

const Stack = createStackNavigator()

export default class App extends React.Component {

  render(){

    return(
      // trying to do...
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="Loading"
          navigationOptions={{header: () => null}}
        >
          <Stack.Screen
            name="Loading"
            component={LoadingScreen}
          />
          <Stack.Screen
            name="Login"
            component={LoginScreen}
          />
            <Stack.Screen
            name="Register"
            component={RegisterScreen}
          />
          <Stack.Screen
            name="Sparked"
            component={AppTabs}
          />
        </Stack.Navigator>
      </NavigationContainer>

    );
  }; }


// old stack nav for auth, directs to single component (AppTabs) once logged in v4

//navigation once logged in 
// const LoginedStack = createStackNavigator({
//   // fix here 
//   Sparked: AppTabs,
// }, 
// {
//   navigationOptions: {
//     header: null,
//   },
// }
// );

// // //auth navigation
// const AuthStack = createStackNavigator({
//   Login: LoginScreen,
//   Register: RegisterScreen,

// });

// //create navigation 
// export default createAppContainer(
//   createSwitchNavigator(
//     {
//       Loading: LoadingScreen,
//       Auth: AuthStack,
//       App: LoginedStack,

//     },
//     {
//       initialRouteName: "Loading",
//       navigationOptions: {
//         header: null,
//       },
//       defaultNavigationOptions: {
//         title: 'App'
//       }
//     }
//   )
// );

Answer 1

Создать Auth Stack

const AuthStack = () => (
  <Stack.Screen
    name="Login"
    component={LoginScreen}
    />
  <Stack.Screen
    name="Register"
    component={RegisterScreen}
  />
)

А в вашем навигационном контейнере используйте как

<Stack.Screen name={"Auth"} component={AuthStack} />