[解決済み] react-navigation v5を使ったreact-nativeアプリのAppNavigatorの構文を更新する。

質問

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

解決方法は？

まず最初に、すべてのナビゲーションを格納するために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がないと思うのですが。