React Native Expo路由切换或键盘弹出时出现白色闪屏的问题求助

大家好，我最近在开发Expo + React Native的项目时遇到了个挺闹心的问题——每次路由切换，或者键盘弹出的瞬间，屏幕都会出现白色闪屏，整体体验特别糟糕。我排查了基础的样式配置，但还是没找到问题所在，下面是我的启动页面代码，麻烦各位大佬帮忙看看哪里可能出问题了？

import { Redirect, router } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { View, Text, ScrollView, Image } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { images } from "../constants";
import CustomButton from "../components/CustomButton";


export default function App() {
  return (
    <SafeAreaView className="bg-primary h-full">
      <ScrollView contentContainerStyle={{ height: "100%" }}>
        <View className=" w-full justify-center items-center min-h-[85vh] px-4">
          <Image
            source={images.logo}
            className="w-[130px] h-[84px] mt-3"
            resizeMode="contain"
          />
          <Image
            source={images.cards}
            className="max-w-[380px] w-full h-[300px]"
            resizeMode="contain"
          />
          {/* 省略剩余组件内容 */}
        </View>
      </ScrollView>
      <StatusBar style="light" />
    </SafeAreaView>
  );
}

我试过给SafeAreaView设置了全局主题背景色，但闪屏问题还是存在，想问问有没有类似经验的朋友能给点排查方向或者解决方案？

可能的排查方向和解决方案： #

• 统一全局背景色：除了SafeAreaView，还要确保路由容器（比如Stack导航的根容器）也设置相同的bg-primary背景色，避免路由切换时出现背景色断层。
• 优化图片加载体验：启动页的图片如果加载延迟，可能会导致闪屏，可以尝试将图片转换为base64格式嵌入代码，或者给Image组件添加fadeDuration属性实现平滑加载：

  <Image
    source={images.logo}
    className="w-[130px] h-[84px] mt-3"
    resizeMode="contain"
    fadeDuration={300}
  />
  

• 配置路由过渡动画：在Expo Router的_layout.js中添加自定义过渡动画，比如淡入淡出，掩盖闪屏瞬间：

  import { Stack } from 'expo-router';
  
  export default function Layout() {
    return (
      <Stack
        screenOptions={{
          animation: 'fade',
          animationDuration: 250,
          headerStyle: { backgroundColor: '#你的primary色值' }
        }}
      />
    );
  }
  

• 键盘弹出时的布局优化：使用KeyboardAvoidingView包裹页面内容，同时确保外层容器的背景色不会因键盘弹出而被重置，避免布局切换时出现白色闪屏。
• 检查Expo全局配置：在app.json中设置全局背景色，和你的主题色保持一致：

  {
    "expo": {
      "backgroundColor": "#你的primary颜色值",
      "androidStatusBar": {
        "backgroundColor": "#你的primary颜色值"
      },
      "iosStatusBar": {
        "backgroundColor": "#你的primary颜色值"
      }
    }
  }
  

备注：内容来源于stack exchange，提问作者Debug