Conversion de StackNavigator de la v4 à la v5 Erreur React Native pour l'authentification

Question

Mon objectif est de convertir le navigateur React-Native stack de la version 4-5. J'ai rencontré quelques difficultés et toute aide serait profondément appréciée.

ERROR : " L'action 'NAVIGATE' avec la charge {"name" : "Auth"} n'a été traitée par aucun navigateur. Avez-vous un écran nommé 'Auth' ? Si vous essayez de naviguer vers un écran dans un navigateur imbriqué, consultez la page suivante https://reactnavigation.org/docs/nesting-navigators.html#navigating-to-a-screen-in-a-nested-navigator . "

Flux de navigation : Pour authentifier l'utilisateur (avec firebase) et aller à un composant qui contient un bottom-tab-navigator déjà fonctionnel. Écran de chargement -> connexion -> inscription -> dans l'application (en tant que composant).

Ce navigateur est dans le fichier app.jsx, voici le code. Nota : J'ai commenté les stack-navigateurs de la v4, qui fonctionnent bien. Encore une fois, je veux convertir ceci à la dernière version 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

Créer une pile d'authentification

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

Et dans votre conteneur de navigation, utilisez comme

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