Android端Expo应用启动时先显应用图标再加载闪屏的问题

我们开发的应用在iOS端运行正常，但在Android端启动时，会先短暂显示应用图标，之后才显示闪屏，iOS端无此现象。目前无法确定是配置错误还是Expo的bug。

具体表现：启动时先显示Android的foregroundImage，再显示设置的闪屏图片，而非仅显示闪屏。

闪屏加载相关的App页面代码 #

import React, { useCallback, Dispatch, SetStateAction, useState, useEffect } from 'react';

import * as SplashScreen from 'expo-splash-screen';
import * as Sentry from 'sentry-expo';

import {Platform} from 'react-native'

import { useNavigation } from '@react-navigation/native';

import {NavigationContainer,DefaultTheme} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import AsyncStorage from '@react-native-async-storage/async-storage';

  
import Home from './src/screens/loggedin/Home'
import Login from './src/screens/notloggedin/Login'

   
const Stack = createNativeStackNavigator();
const appTheme = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        primary: 'rgb(255, 255, 255)',
        card: 'rgb(255, 255, 255)',
        background: 'rgb(255, 255, 255)'
    }
};

Platform.OS == "ios" && SplashScreen.preventAutoHideAsync();

function App({navigation}:any){


  const [appIsReady, setAppIsReady] = useState(false);
  const [user,setUser] = useState<string|null>(null)
  const [hasVisitedAppBefore,setHasVisitedAppBefore] : [string,any] = useState("false")

  // is signed in
  let isSignedin = user==null||user=="" ? false : true

  
  useEffect(() => {
 

    async function prepare() {

      // set user if exist
      if (await AsyncStorage.getItem('user')!=null){
        let userData : any = await AsyncStorage.getItem('user')
        setUser(JSON.parse(userData).sub)
      }

      try {
        setHasVisitedAppBefore(await AsyncStorage.getItem("hasVisited"))

        await new Promise(resolve => setTimeout(resolve, 1000));

      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);




  if (!appIsReady){
    return
  } else {
    SplashScreen.hideAsync();
  }

  return (
    <NavigationContainer theme={appTheme}>

        {!isSignedin ? 
        <Stack.Navigator screenOptions={{gestureEnabled: false}}>
          {(hasVisitedAppBefore=="false"||hasVisitedAppBefore==null) && <Stack.Screen name="Initial" component={Initial} options={{title: 'App', headerShown:false}} />}
          <Stack.Screen name="Home" component={Login} options={{title: 'App', headerShown:false}} />
        </Stack.Navigator>
        :
        /** loggedin */
        <Stack.Navigator initialRouteName={"Home"} screenOptions={{gestureEnabled: false}}>
        
          <Stack.Screen name="Home" component={Home} options={{title: 'App', headerShown:false}} />
         
        </Stack.Navigator>
        }
    </NavigationContainer>
  );
}

export default App;

app.json配置文件 #

{
  "expo": {
    "name": "app",
    "slug": "app",
    "version": "2.1.3",
    "platforms": [
      "ios",
      "android"
    ],
    "orientation": "portrait",
    "icon": "./assets/app_icon.png", 
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash_icon.png", // 这是应该唯一显示的闪屏图片
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NSCameraUsageDescription": "XXX",
        "NSLocationWhenInUseUsageDescription": "XXX."
      },
      "bundleIdentifier": "com.somepackage.app"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/android_app_icon.png", // 这是应用启动时先显示的图标
        "backgroundColor": "#ffffff"
      },
      "permissions": [
        "android.permission.CAMERA",
        "android.permission.ACCESS_COARSE_LOCATION",
        "android.permission.ACCESS_FINE_LOCATION",
        "android.permission.FOREGROUND_SERVICE"
      ],
      "package": "com.somepackage.app",      
      "config": {
        "googleMaps": {
          "apiKey": "XXX"
        }
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      [
        "expo-barcode-scanner",
        {
          "cameraPermission": "XXX"
        }
      ],
      [
        "expo-location",
        {
          "locationAlwaysAndWhenInUsePermission": "XXX"
        }
      ],
      "sentry-expo"
    ],
    "extra": {
      "eas": {
        "projectId": "XXX"
      }
    },
    "owner": "XXX",
    "runtimeVersion": {
      "policy": "appVersion"
    },
    "updates": {
      "url": "XXX"
    }
  }
}

相关依赖版本 #

"expo-splash-screen": "~0.20.5",
"expo": "^49.0.0",

注：存在问题演示视频，可直观看到启动时的图标切换过程。

内容的提问来源于stack exchange，提问作者Lukas Guldstøv