Expo项目加载expo-splash-screen后出现白屏问题求助

针对你遇到的加载闪屏后出现白屏、且Expo Go环境正常但打包APK后异常的问题，结合你的代码，可以通过以下几点调整来修复：

1. 修正preventAutoHideAsync执行时机 #

将SplashScreen.preventAutoHideAsync()移到组件内部的useEffect中，避免在组件初始化前执行导致打包后时机异常：

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // 移至此处执行，确保组件初始化后锁定闪屏
        await SplashScreen.preventAutoHideAsync();
        await Font.loadAsync ({
          'CG-Bold': require('./assets/fonts/CormorantGaramond-Bold.ttf')
        });
        // 测试用延时可移除，正式环境无需刻意等待
        // await new Promise(resolve => setTimeout(resolve, 2000));
        setAppIsReady(true);
      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);
  // 其他代码...
}

2. 避免返回null，替换为占位View #

当appIsReady为false时返回null，打包后会直接显示白屏而非保持闪屏，替换为空View占位：

if (!appIsReady) {
  return <View style={{ flex: 1 }} />;
}

3. 优化闪屏隐藏逻辑 #

直接在资源加载完成后触发闪屏隐藏，同时保留兜底逻辑，确保组件渲染完成后也能触发：

async function prepare() {
  try {
    await SplashScreen.preventAutoHideAsync();
    await Font.loadAsync ({
      'CG-Bold': require('./assets/fonts/CormorantGaramond-Bold.ttf')
    });
    setAppIsReady(true);
    // 资源加载完成后直接隐藏闪屏
    await SplashScreen.hideAsync();
  } catch (e) {
    console.warn(e);
    setAppIsReady(true);
    await SplashScreen.hideAsync();
  }
}

同时可简化或移除原onLayout相关逻辑：

// 移除以下代码
// const onLayoutRootView = useCallback(async () =>{
//   if (appIsReady) {
//     await SplashScreen.hideAsync();
//   }
// }, [appIsReady]);

// 返回的View无需绑定onLayout
return(
  <View>
    <MainLogin />
  </View>
);

4. 确保字体资源被正确打包 #

检查app.json是否配置了字体资源路径，避免打包时字体丢失：

{
  "expo": {
    "assets": ["./assets/fonts/"]
  }
}

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