javascript - 将 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)并转到一个包含已经可用的底部选项卡导航器的组件。加载屏幕 -> 登录 -> 注册 -> 在应用程序中(作为一个组件)。

这个导航器在 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} />