DingdongRider/navigation/index.tsx

import {
  NavigationContainer,
  DefaultTheme,
  DarkTheme,
  CommonActions,
} from '@react-navigation/native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from '@react-navigation/stack';
import * as React from 'react';
import { ColorSchemeName } from 'react-native';
import { useTranslation } from 'react-i18next';
import useModel from 'flooks';

//弹窗模块
import AlertModalScreen from '../modals/AlertModalScreen';
import ModalStackNavigator from './ModalStackNavigator';

//登录模块堆栈
import LoginStackNavigator from './LoginStackNavigator';

//首页堆栈
import MainTabNavigator from './MianTabNavigator';

//我的模块堆栈
import MineStackNavigator from './MineStackNavigator';

import { useCreation } from 'ahooks';

import { RootStackParamList } from '../types';
import LinkingConfiguration from './LinkingConfiguration';

import User from '../stores/User';

export default function Navigation({
  colorScheme,
}: {
  colorScheme: ColorSchemeName;
}) {
  const { initialRouteName } = useModel(User, ['initialRouteName']);
  const navRef = React.useRef();

  const initRoute = useCreation(() => {
    if (__DEV__) {
      return {
        name: 'Main',
      };
    } else {
      return {
        name: initialRouteName !== 'Main' ? 'Login' : initialRouteName,
        screen: initialRouteName !== 'Main' ? initialRouteName : 'Order',
      };
    }
  }, [__DEV__, initialRouteName]);

  React.useEffect(() => {
    if (navRef.current) {
      navRef.current.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [
            {
              name: initRoute.name,
              screen: initRoute.screen,
            },
          ],
        })
      );
    }
  }, [navRef, initialRouteName]);

  return (
    <NavigationContainer
      ref={navRef}
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
    >
      <RootNavigator initRoute={initRoute} />
    </NavigationContainer>
  );
}

const Stack = createStackNavigator<RootStackParamList>();

function RootNavigator({ initRoute }) {
  const { t } = useTranslation();
  return (
    <Stack.Navigator
      initialRouteName={initRoute.name}
      screenOptions={{
        stackPresentation: 'push',
        headerShown: false,
      }}
    >
      <Stack.Screen name="Login" component={LoginStackNavigator} />

      <Stack.Screen
        name="Main"
        component={MainTabNavigator}
        options={{
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      />

      <Stack.Screen
        name="MineStack"
        component={MineStackNavigator}
        options={{
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      />
      <Stack.Screen
        name="Modal"
        mode="modals"
        component={ModalStackNavigator}
        options={{
          cardStyle: { backgroundColor: 'transparent' },
          animationEnabled: false,
        }}
      />
    </Stack.Navigator>
  );
}