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

Question

在我的 react-native 应用程序中，我正在升级到 react-navigation v5。对于传递到我的主 App.js 文件中的 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',
}));

代码在 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',
}));

Answer 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

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

Updating syntax for AppNavigator in react-native app using react-navigation v5

reactjs

react-native

react-navigation-v5