从React-Navigation v4升级到v5

Question

我正在用react-native和expo构建一个应用程序，并且最近才升级到React Navigation v5，似乎无法弄清楚新的配置。以下是我使用v4配置的原始文件。

AppNavigator.js

import React from 'react';
import { NavigationContainer, createSwitchNavigator } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';


import MainTabNavigator from './MainTabNavigator';
import SignInScreen from '../screens/AuthScreens/SignInScreen';
import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import RegisterScreen from '../screens/AuthScreens/RegisterScreen';
import ResetPasswordScreen from '../screens/AuthScreens/ResetPasswordScreen';

const AuthStack = createStackNavigator({ SignIn: SignInScreen, Register: RegisterScreen, ResetPassword: ResetPasswordScreen });

export default NavigationContainer(
  createStackNavigator({
      AuthLoading: AuthLoadingScreen,
      Main: MainTabNavigator,
      Auth: AuthStack,
    },
    {
      initialRouteName: 'AuthLoading',
    }
  )
);

MainTabNavigator.js

import React from 'react';
import { Platform } from 'react-native';
import firebase from 'firebase';
import "@firebase/firestore";
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import TabBarIcon from '../components/TabBarIcon';
import TabBarIcon2 from '../components/TabBarIcon2';
import PlayingScreen from '../screens/PlayingScreens/PlayingScreen';
import CreateGame from '../screens/PlayingScreens/CreateGame';
import CreateHoles from '../screens/PlayingScreens/CreateHoles';
import CreateTeams from '../screens/PlayingScreens/CreateTeams';
import PlayerSetup from '../screens/PlayingScreens/PlayerSetup';
import GameSettings from '../screens/PlayingScreens/GameSettings';
import UpdateTeams from '../screens/PlayingScreens/UpdateTeams';
import PlayerScoresList from '../screens/PlayingScreens/PlayerScoresList';
import PlayerScores from '../screens/PlayingScreens/PlayerScores';
import JoinGame from '../screens/PlayingScreens/JoinGame';
import JoinGame2 from '../screens/PlayingScreens/JoinGame2';
import WaitingScreen from '../screens/PlayingScreens/WaitingScreen';
import CancelGame from '../screens/PlayingScreens/CancelGame';
import CurrentGame from '../screens/PlayingScreens/CurrentGame';
import CurrentGameIndividual from '../screens/PlayingScreens/CurrentGameIndividual';
import Chat from '../screens/PlayingScreens/Chat';
import HistoryScreen from '../screens/HistoryScreens/HistoryScreen';
import HistoryGame from '../screens/HistoryScreens/HistoryGame';
import HistoryGameIndividual from '../screens/HistoryScreens/HistoryGameIndividual';
import HistoryChat from '../screens/HistoryScreens/HistoryChat';
import HistoryPlayerScoreList from '../screens/HistoryScreens/HistoryPlayerScoreList';
import HistoryPlayerScores from '../screens/HistoryScreens/HistoryPlayerScores';
import GamesScreen from '../screens/RulesScreens/GamesScreen';
import GameRules from '../screens/RulesScreens/GameRules';
import CoursesScreen from '../screens/CoursesScreens/CoursesScreen';
import AddCourse from '../screens/CoursesScreens/AddCourse';
import MyCourse from '../screens/CoursesScreens/MyCourse';
import ProfileScreen from '../screens/ProfileScreens/ProfileScreen';
import ChangeEmailScreen from '../screens/ProfileScreens/ChangeEmailScreen';
import ChangePasswordScreen from '../screens/ProfileScreens/ChangePasswordScreen';


const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
});

const PlayingStack = createStackNavigator(
  {
    Home: PlayingScreen, CreateGame, JoinGame, CreateHoles, PlayerSetup, CreateTeams, JoinGame2, WaitingScreen, CancelGame, CurrentGame, CurrentGameIndividual, Chat, GameSettings, UpdateTeams, PlayerScoresList, PlayerScores
  },
  config
);

PlayingStack.navigationOptions = {
  tabBarLabel: 'Playing',
  tabBarOptions: { 
    activeTintColor: '#8fc0a9',
    inactiveTintColor: '#b5b5b5',
  },
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios' ? 'ios-play-circle' : 'md-play-circle' }
    />
  ),
};

PlayingStack.path = 'CurrentGame';

const ProfileStack = createStackNavigator(
  {
    Home: ProfileScreen, ChangeEmail: ChangeEmailScreen, ChangePassword: ChangePasswordScreen,
  },
  config
);

ProfileStack.navigationOptions = {
  tabBarLabel: 'Profile',
  tabBarOptions: { 
    activeTintColor: '#8fc0a9',
    inactiveTintColor: '#b5b5b5',
  },
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-person' : 'md-person'}
    />
  ),
};

ProfileStack.path = '';

const HistoryStack = createStackNavigator(
  {
    Home: HistoryScreen, HistoryGame, HistoryGameIndividual, HistoryChat, HistoryPlayerScoreList, HistoryPlayerScores
  },
  config
);

HistoryStack.navigationOptions = {
  tabBarLabel: 'Results',
  tabBarOptions: { 
    activeTintColor: '#8fc0a9',
    inactiveTintColor: '#b5b5b5',
  },
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'} />
  ),
};

HistoryStack.path = '';

const GamesStack = createStackNavigator(
  {
    Games: GamesScreen, GameRules,
  },
  config
);

GamesStack.navigationOptions = {
  tabBarLabel: 'Rules',
  tabBarOptions: { 
    activeTintColor: '#8fc0a9',
    inactiveTintColor: '#b5b5b5',
  },
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-paper' : 'md-paper'} />
  ),
};

  GamesStack.path = '';

const CourseStack = createStackNavigator(
  {
    Home: CoursesScreen, AddCourse, MyCourse
  },
  config
);

CourseStack.navigationOptions = {
  tabBarLabel: 'Courses',
  tabBarOptions: { 
    activeTintColor: '#8fc0a9',
    inactiveTintColor: '#b5b5b5',
  },
  tabBarIcon: ({ focused }) => (
    <TabBarIcon2
      focused={focused}
      name={'golf-course'}
    />
  ),
};

  CourseStack.path = '';

const tabNavigator = createBottomTabNavigator({
  PlayingStack,
  HistoryStack,
  GamesStack,
  CourseStack,
  ProfileStack,
});

tabNavigator.path = '';

export default tabNavigator;

有人可以帮我理解我应该如何重写上面的代码，以便它可以与React-Navigation v5一起使用吗？

谢谢