将StackNavigator从v4转换为v5 React Native错误以进行身份​​验证

Question

我的目标是从版本4-5转换React-Native堆栈导航器。我遇到了一些挑战，我们将不胜感激任何帮助。

错误：“ 具有有效负载{“ name”：“ Auth”}的操作'NAVIGATE'未由任何导航器处理。 您是否有一个名为“ Auth”的屏幕？ 如果您尝试导航到嵌套导航器中的屏幕，请参见https://reactnavigation.org/docs/nesting-navigators.html#navigating-to-a-screen-in-a-nested-navigator。“

导航流程：要对用户进行身份验证（使用Firebase），并转到包含已正常运行的bottom-tab-navigator的组件。载入画面->登录->注册->在应用程序中（作为组件）。

此导航器在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

创建身份验证堆栈

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

在您的导航容器中用作

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