使用 react-navigation v5 在 react-native 应用程序中更新 AppNavigator 的语法答案

【问题标题】：Updating syntax for AppNavigator in react-native app using react-navigation v5使用 react-navigation v5 在 react-native 应用程序中更新 AppNavigator 的语法
【发布时间】：2021-09-08 20:29:12
【问题描述】：

在我的 react-native 应用程序中，我正在升级到 react-navigation v5。对于 AppNavigator，它被传递到我的主 App.js 文件中，旧代码如下所示：

import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';

import LoginScreen from '../screens/LoginScreen';
import LoadingScreen from '../screens/LoadingScreen';
const AuthStack = createStackNavigator({
  Login: LoginScreen,
  Loading: LoadingScreen
});

import MainDrawerNavigator from './DrawerNavigator';

export default createAppContainer(createSwitchNavigator({
  Main: MainDrawerNavigator,
  Auth: AuthStack
},
{
  initialRouteName: 'Auth',
}));

代码在 App.js 中使用如下：

<Provider store={store}>
  <NavigationContainer ref={navigationRef}>
    <View style={styles.container}>
      {Platform.OS === 'ios' && <StatusBar barStyle="light-content" />}
      <AppNavigator ref={nav => { navigatorRef = nav }} /> // AppNavigator used here
    </View>
  </NavigationContainer>
</Provider>

据我所知，createAppContainer 不再是 react-navigation v5 中处理此问题的方法。我在此导入时遇到错误：

import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';

... 部分原因是此类导入位置的目录结构已更改。但据我所知，createAppContainer 现在不存在了吗？换句话说，这不仅仅是它现在位于其他地方的问题。如果我错了，请纠正我。

所以我的问题是，这段代码在 v5 中应该是什么样子？任何见解将不胜感激。我指的是这个AppNavigator代码：

import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';

import LoginScreen from '../screens/LoginScreen';
import LoadingScreen from '../screens/LoadingScreen';
const AuthStack = createStackNavigator({
  Login: LoginScreen,
  Loading: LoadingScreen
});

import MainDrawerNavigator from './DrawerNavigator';

export default createAppContainer(createSwitchNavigator({
  Main: MainDrawerNavigator,
  Auth: AuthStack
},
{
  initialRouteName: 'Auth',
}));

【问题讨论】：

标签： reactjs react-native react-navigation-v5

【解决方案1】：

首先你需要导入 NavigationContainer 来包含你所有的导航

import { NavigationContainer } from '@react-navigation/native'

然后像这样创建您的 StackNavigator

import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

import LoginScreen from '../screens/LoginScreen'
import LoadingScreen from '../screens/LoadingScreen'

function AuthStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name = "LoginScreen"
        component = {LoginScreen}
      />
    
      <Stack.Screen
        name = "LoadingScreen"
        component = {LoadingScreen}
      />
    </Stack.Navigator>
  )
}

接下来，创建抽屉导航器

import { createDrawerNavigator } from '@react-navigation/drawer'

const MainDrawer = createDrawerNavigator()

App 功能最终会是这个样子

import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createDrawerNavigator } from '@react-navigation/drawer'

const Stack = createStackNavigator()

import LoginScreen from '../screens/LoginScreen'
import LoadingScreen from '../screens/LoadingScreen'

function AuthStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name = "LoginScreen"
        component = {LoginScreen}
      />
    
      <Stack.Screen
        name = "LoadingScreen"
        component = {LoadingScreen}
      />
    </Stack.Navigator>
  )
}

const MainDrawer = createDrawerNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <MainDrawer.Navigator
        initialRouteName = "Auth"
      >
        <MainDrawer.Screen
          name = 'Auth'
          component = {AuthStack}
        />

        <MainDrawer.Screen
          name = 'YourDrawerScreen'
          component = {YourDrawerScreen}
        />
      </MainDrawer.Navigator>
    </NavigationContainer>
  )
}

我认为 React-Navigation v5 中没有 Switch Navigator

【讨论】：