reactjs - 在 react-navigation 5.x 中放置 createSwitchNavigator 以从 react-navigation 4 迁移到 5.x

Question

我正在将 React Native 应用程序从 react-navigation 4 迁移到 5.x，但找不到包含 createSwitchNavigation 的包。具体来说，我对身份验证 token 检查部分有疑问。

使用 react-navigation 4 我有:

const switchNavigator = createSwitchNavigator({
  ResolveAuth: ResolveAuthScreen,
  signinFlow: createStackNavigator({
    Signup: SignupScreen,
    Signin: SigninScreen,
  }),
  appFlow: createBottomTabNavigator({
    TrackCreate: TrackCreateScreen,
    trackListFlow: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen
    }),
    Account: AccountScreen,
  })
}, {
  initialRouteName: 'ResolveAuth'
});

然后我有一个包含 ResolveAuthScreen 组件的文件。

import React, { useEffect } from 'react';
import { connect } from 'react-redux';

const ResolveAuthScreen = (props) => {
  useEffect(() => {
    if (!props.token) {
      props.navigation.navigate('loginFlow');
    } else {
      props.navigation.navigate('TrackList');
    }
  }, []);

  return null;
};

const mapStateToProps = (state) => {
  return {
    token: state.auth.token,
  };
};

export default connect(mapStateToProps, null)(ResolveAuthScreen);

其余组件对于这个疑问并不重要。我想知道如何复制相同的 Switch 导航流程。
我想知道如何创建这样的东西:

const Switch = createSwitchNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Switch.Navigator>
        <Switch.Screen name="ResolveAuth" component={ResolveAuthScreen} />
        <Switch.Screen name="signinFlow" component={SignInFlowScreens} />
        <Switch.Screen name="appFlow" component={AppFlowScreens} />
      </Switch.Navigator>
    </NavigationContainer>
  );
}

Answer 1

为了使迁移更容易，您仍然可以使用 createSwitchNavigator来自 @react-navigation/compat