如何从React Navigation栈移除路由？解决登录后重复显示启动页问题

问题核心 #

你的当前流程会经过Splash，是因为Stack.Navigator中始终包含Splash页面，且登录状态更新后导航组件重新渲染，会先渲染Splash再根据状态切换到Root。要解决这个问题，有两种可行方案：

方案1：调整导航结构，让Splash仅在App初始化时显示 #

把Splash从主导航栈中移除，只在App启动初始化阶段显示，完成初始化后直接渲染对应状态的导航栈：

import { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useSelector } from 'react-redux';

const Stack = createStackNavigator();

function App() {
  const authState = useSelector(state => state.auth);
  const [isAppInitialized, setIsAppInitialized] = useState(false);

  useEffect(() => {
    // 这里执行App初始化逻辑，比如检查本地存储的token、加载必要资源等
    const initializeApp = async () => {
      // 模拟初始化延迟，实际替换为你的业务逻辑
      await new Promise(resolve => setTimeout(resolve, 1500));
      setIsAppInitialized(true);
    };

    initializeApp();
  }, []);

  // 初始化未完成时，仅显示Splash
  if (!isAppInitialized) {
    return <SplashScreen />;
  }

  // 初始化完成后，根据登录状态渲染对应导航栈
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {authState.isLoggedIn && authState.token !== "" ? (
          <>
            <Stack.Screen name="Root" component={Root} />
            <Stack.Screen name="Detail" component={DetailScreen} />
          </>
        ) : (
          <>
            <Stack.Screen name="Welcome" component={WelcomeScreen} />
            <Stack.Screen name="SignIn" component={SignInScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

这种方式下，Splash仅在App启动时出现一次，后续状态切换（登录/登出）都不会再回到Splash页面。

方案2：登录成功后直接重置路由到Root #

如果你想保留原有导航栈结构，可通过监听登录状态变化，在状态变为已登录时直接重置路由到Root，跳过Splash：

步骤1：修改SignInScreen中的逻辑 #

在SignInScreen组件中添加监听，当登录状态更新为true时执行路由重置：

import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { CommonActions } from '@react-navigation/native';

function SignInScreen({ navigation }) {
  const authState = useSelector(state => state.auth);

  useEffect(() => {
    // 当登录状态变为true时，重置路由到Root
    if (authState.isLoggedIn) {
      navigation.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [{ name: "Root" }],
        })
      );
    }
  }, [authState.isLoggedIn, navigation]);

  const onSignIn = () => {
    dispatch(
      signIn({
        // ...userData,
        isLoggedIn: true,
      })
    );
  };

  // 组件其他逻辑...
}

为什么你原来的代码无效？ #

你之前先重置路由到Splash，再更新登录状态，此时导航组件会因为状态变化重新渲染，再次显示Splash后才切换到Root，所以无法跳过Splash页面。正确的逻辑应该是先更新登录状态，再根据状态直接重置到Root，或者监听状态变化后执行重置。

内容的提问来源于stack exchange，提问作者Victor Ang