React Native登录系统启动异常求助：先显登录页再跳转首页

问题根源 #

启动时读取EncryptedStorage是异步操作，你当前的逻辑是先渲染登录页，等异步读取完成、redux状态更新后再跳转到首页，这就导致了短暂的登录页闪屏现象。

最优解决方案 #

1. 添加启动加载拦截 #

在应用最外层增加加载状态，等异步验证完成后再渲染导航容器，避免提前显示登录页：

// App.js
import { useEffect, useState } from 'react';
import { ActivityIndicator, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import EncryptedStorage from 'react-native-encrypted-storage';
import { setAuthUser } from './features/auth/authSlice';
import Navigation from './Navigation';

export default function App() {
  const [isLoading, setIsLoading] = useState(true);
  const dispatch = useDispatch();

  useEffect(() => {
    const checkAuthStatus = async () => {
      try {
        const userData = await EncryptedStorage.getItem('user');
        if (userData) {
          dispatch(setAuthUser(JSON.parse(userData)));
        }
      } catch (error) {
        console.error('读取加密存储失败:', error);
      } finally {
        setIsLoading(false);
      }
    };

    checkAuthStatus();
  }, [dispatch]);

  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return <Navigation />;
}

2. 动态设置导航初始路由 #

让导航容器根据redux中的登录状态直接渲染对应页面，而非固定初始路由为登录页：

// Navigation.js
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useSelector } from 'react-redux';
import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

export default function Navigation() {
  const { user } = useSelector(state => state.auth);

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName={user ? 'Home' : 'Login'}
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

为什么这样解决 #

• 启动阶段先执行异步读取操作，同时显示加载组件，避免了登录页提前渲染。
• 等读取完成并更新redux状态后，导航容器才会根据最终的登录状态渲染对应的初始页面，从根源消除了跳转闪屏的问题。
• 这种方式符合React的异步状态更新逻辑，确保导航渲染时已经拿到了最终的登录状态，不会出现状态滞后导致的页面闪烁。

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