React Native 登出跳转登录页时如何重新显示app.json定义的Splash Screen

方案一：直接使用expo-splash-screen原生API（推荐） #

这个方案直接复用你在app.json中配置的原生Splash，效果和首次启动完全一致，不需要额外写UI组件。

核心修改点： #

• 将全局的Splash控制逻辑移到App组件内部，和登录状态联动
• 封装登出逻辑，在登出时主动触发Splash显示，延迟后自动隐藏
• 调整导航逻辑，登录状态变更时自动切换路由，同时重置路由栈避免回退问题

修改后的App.js完整代码： #

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as SplashScreen from 'expo-splash-screen';
import React, { Fragment, useState, useEffect } from 'react';
import MainScreen from './screens/MainScreen';
import SignIn from './screens/SignInScreen';
// 移除全局的Splash控制代码，移到组件内和状态联动

const Stack = createStackNavigator();

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 首次启动显示Splash逻辑
  useEffect(() => {
    const init = async () => {
      await SplashScreen.preventAutoHideAsync();
      // 这里可以加首次启动的初始化逻辑，比如检查本地token是否有效
      setTimeout(SplashScreen.hideAsync, 3000);
    }
    init();
  }, []);

  // 封装登出逻辑，传给MainScreen调用
  const handleLogout = async () => {
    // 第一步：清空本地所有用户数据，比如token、用户信息等
    // 示例：await AsyncStorage.clear(); 你可以替换为自己的缓存清理逻辑
    
    // 第二步：显示原生Splash
    await SplashScreen.preventAutoHideAsync();
    
    // 第三步：重置登录状态，自动切换到登录页
    setIsLoggedIn(false);
    
    // 第四步：延迟3秒隐藏Splash，和首次启动效果完全一致
    setTimeout(SplashScreen.hideAsync, 3000);
  };

  return (
    <Fragment>
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="sign-in"
          screenOptions={{
            headerShown: false,
          }}
        >
          {isLoggedIn ? (
            // 登录状态下只渲染主页面，避免用户手动回退到登录页
            <Stack.Screen name="main-screen">
              {(props) => (
                <MainScreen
                  {...props}
                  setIsLoggedIn={setIsLoggedIn}
                  isLoggedIn={isLoggedIn}
                  handleLogout={handleLogout} // 把登出方法传给主页面
                />
              )}
            </Stack.Screen>
          ) : (
            // 未登录状态下只渲染登录页
            <Stack.Screen name="sign-in">
              {(props) => (
                <SignIn
                  {...props}
                  setIsLoggedIn={setIsLoggedIn}
                  isLoggedIn={isLoggedIn}
                />
              )}
            </Stack.Screen>
          )}
        </Stack.Navigator>
      </NavigationContainer>
    </Fragment>
  );
}

主页面登出按钮调用示例（MainScreen.js）： #

// 在你的登出按钮点击事件中直接调用传入的handleLogout方法即可
<TouchableOpacity onPress={handleLogout}>
  <Text>退出登录</Text>
</TouchableOpacity>

方案二：自定义模拟Splash组件（兼容特殊场景） #

如果你的expo版本不支持重复调用原生Splash显示，可以做一个和原生配置完全一致的自定义Splash组件，效果完全一样：

1. 新建SplashScreen.js组件，样式完全对齐app.json配置：

import React, { useEffect } from 'react';
import { View, Image, StyleSheet } from 'react-native';

const CustomSplash = ({ onHide }) => {
  useEffect(() => {
    const timer = setTimeout(onHide, 3000);
    return () => clearTimeout(timer);
  }, [onHide]);

  return (
    <View style={styles.container}>
      <Image 
        source={require('../assets/splash_screen_image.png')}
        style={styles.image}
        resizeMode="cover"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#2799E0',
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: '100%',
    height: '100%',
  }
});

export default CustomSplash;

2. 在App组件中加一个状态showCustomSplash控制组件显示，登出时把这个状态设为true，3秒后自动设为false即可。

注意事项 #

• 登出时一定要清空所有本地用户缓存，避免状态残留导致的逻辑异常
• 推荐使用条件渲染路由的方式，不用手动调用navigation跳转，自动重置路由栈避免用户按返回键回到登录前的页面
• 如果需要在Splash显示期间执行异步操作（比如拉取全局配置、检查更新），可以把延时隐藏改成异步逻辑执行完成后再调用hide方法。

内容的提问来源于stack exchange，提问作者Lorenz Mueller