React Native条件渲染失效：Expo应用卡在白屏问题求助

核心问题分析 #

应用在原生端（iOS/Android）卡在白屏，但Web端正常运行，且错误代码能触发提示，说明核心逻辑无语法错误，问题大概率出在Firebase Auth状态监听的异步时序、导航器原生兼容性或原生端依赖配置上。

具体修复方案 #

1. 修正Auth状态监听的时序问题 #

当前代码用固定2秒延迟隐藏闪屏，若Auth状态回调在2秒后才触发，会导致闪屏消失后isLoggedIn状态未更新，导航器因未获取到用户信息引发白屏。修改为等待Auth状态返回后再隐藏闪屏：

import React, { useState, useEffect } from "react";

import { NavigationContainer } from "@react-navigation/native";
import AuthNavigator from "./app/navigation/AuthNavigator";
import Splash from "./app/screen/splash";
import AppNavigator from "./app/navigation/AppNavigator";
import { auth } from "./app/authentication/Firebase";

export default function App() {
  const [isSplashVisible, setIsSplashVisible] = useState(true);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [authReady, setAuthReady] = useState(false); // 标记Auth状态是否已获取

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setIsLoggedIn(!!user);
      setAuthReady(true);
      // 保留1秒最小闪屏时长，避免视觉突兀
      setTimeout(() => setIsSplashVisible(false), 1000);
    });

    // 处理Auth超时情况（比如网络异常）
    const timeout = setTimeout(() => {
      if (!authReady) {
        setIsSplashVisible(false);
        console.warn("Auth状态获取超时，请检查网络或Firebase配置");
      }
    }, 5000);

    return () => {
      unsubscribe();
      clearTimeout(timeout);
    };
  }, []);

  if (isSplashVisible) {
    return <Splash />;
  }

  return (
    <NavigationContainer>
      {isLoggedIn ? <AppNavigator /> : <AuthNavigator />}
    </NavigationContainer>
  );
}

2. 排查导航器原生兼容性 #

Web端正常但原生端白屏，可能是子导航器使用了Web专属API或组件：

• 临时替换导航器为简单文本组件，验证是否还白屏：

  // 替换return部分代码
  return (
    <NavigationContainer>
      {isLoggedIn ? <Text>已登录状态</Text> : <Text>未登录状态</Text>}
    </NavigationContainer>
  );
  

  若此时正常，说明问题出在AuthNavigator或AppNavigator内，逐一排查页面组件是否使用了window、document等Web专属对象。

3. 清理缓存与版本校验 #

• 执行expo start --clear清除项目缓存后重启；
• 检查package.json中@react-navigation/native、expo版本是否兼容，尝试升级到稳定版本组合。

4. 验证Firebase原生配置 #

• 确认iOS项目已添加GoogleService-Info.plist、Android项目已添加google-services.json；
• 在Auth回调中添加日志，通过expo logs查看原生端日志，确认回调是否触发：

  auth.onAuthStateChanged((user) => {
    console.log("原生端Auth状态：", user); // 新增日志
    // ...其余代码
  });
  

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