react-native - 如何在 react-navigation-6 中重构“createSwitchNavigator”代码？

Question

下面是使用 react-navigation 版本 4 的代码。但在版本 6 中 createSwitchNavigator 已完全删除。如何重构以下代码以使其工作？我不想使用 react-native-compat 包。

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AccountScreen from './src/screens/AccountScreen';
import SigninScreen from './src/screens/SigninScreen';
import SignupScreen from './src/screens/SignupScreen';
import TrackCreateScreen from './src/screens/TrackCreateScreen';
import TrackDetailScreen from './src/screens/TrackDetailScreen';
import TrackListScreen from './src/screens/TrackListScreen';

const switchNavigator = createSwitchNavigator({
  loginFlow: createStackNavigator({
    Signup: SignupScreen,
    Signin: SigninScreen,
  }),
  mainFlow: createBottomTabNavigator({
    trackListFlow: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen,
    }),
    TrackCreate: TrackCreateScreen,
    Account: AccountScreen,
  }),
});

export default createAppContainer(switchNavigator);

Answer 1

我能够成功重构 react-navigation 版本 6 中的代码。完整的代码在sandbox中可用。

应用程序.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import RootNavigator from "./src/routes/createRootNavigator";

export default function App() {
  return (
    <NavigationContainer>
      <RootNavigator></RootNavigator>
    </NavigationContainer>
  );
}
});

createRootNavigator.js

.
.
const loginFlowStack = createNativeStackNavigator();
const trackListStack = createNativeStackNavigator();
const mainFlowBottomTabNavigator = createBottomTabNavigator();

function trackListStackNavigator() {
  return (
    <trackListStack.Navigator>
      <trackListStack.Screen name="TrackList" component={TrackListScreen} />
      <trackListStack.Screen name="TrackDetail" component={TrackDetailScreen} />
    </trackListStack.Navigator>
  );
}

const RootNavigator = (signedIn = false) => {
  if (!signedIn) {
    return (
      <loginFlowStack.Navigator>
        <loginFlowStack.Screen name="SignUp" component={SignUpScreen} />
        <loginFlowStack.Screen name="SignIn" component={SignInScreen} />
      </loginFlowStack.Navigator>
    );
  } else {
    return (
      <mainFlowBottomTabNavigator.Navigator>
        <mainFlowBottomTabNavigator.Screen
          name="trackListStackNavigator"
          component={trackListStackNavigator}
          options={{ headerShown: false }}
        />
        <mainFlowBottomTabNavigator.Screen
          name="TrackCreate"
          component={TrackCreateScreen}
        />
        <mainFlowBottomTabNavigator.Screen
          name="Account"
          component={AccountScreen}
        />
      </mainFlowBottomTabNavigator.Navigator>
    );
  }
};
export default RootNavigator;