React Native Expo Android端启动页闪烁及高度异常问题求助

可行解决方案 #

1. 规范Expo启动页配置 #

• 确保app.json中splash配置的图片适配Android/iOS尺寸规范，比如Android优先使用9:16比例图，并在不同dpi资源目录（drawable-mdpi/drawable-hdpi等）放置对应分辨率的图片，避免拉伸导致高度偏移。
• 调整resizeMode参数，若之前用contain可尝试改为cover或native，减少布局适配问题：

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#090909"
    }
  }
}

2. 修正Android原生样式配置 #

• 移除android:windowIsTranslucent="true"属性，该属性会导致启动页与RN初始化页面叠加引发闪烁，修改后的样式：

<style name="Theme.App.SplashScreen" parent="AppTheme">
    <item name="android:windowBackground">@drawable/splashscreen</item>
    <item name="android:statusBarColor">#090909</item>
    <item name="android:navigationBarColor">#090909</item>
</style>

• 将@drawable/splashscreen改为图层组合资源，避免单纯图片适配问题：

<!-- drawable/splashscreen.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/black" /> <!-- 对应#090909 -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash_image" />
    </item>
</layer-list>

• 确认AndroidManifest.xml中启动Activity的android:theme已正确指向Theme.App.SplashScreen，替换Expo默认主题。

3. 禁用Expo自动启动页生成 #

• 在app.json中添加配置，关闭Expo自动生成启动页的逻辑，避免与自定义原生启动页冲突：

{
  "expo": {
    "splash": {
      "disableAutomaticSplashScreen": true
    }
  }
}

4. 添加RN页面过渡逻辑 #

• 在RN根组件中实现启动页过渡，确保原生启动页隐藏前RN页面已完成渲染：

import { useEffect, useState } from 'react';
import { View, StyleSheet } from 'react-native';

export default function App() {
  const [showSplash, setShowSplash] = useState(true);

  useEffect(() => {
    // 替换为实际业务初始化逻辑
    const timer = setTimeout(() => {
      setShowSplash(false);
    }, 500);
    return () => clearTimeout(timer);
  }, []);

  if (showSplash) {
    return <View style={styles.splash} />;
  }

  return (
    // 应用核心内容
  );
}

const styles = StyleSheet.create({
  splash: {
    flex: 1,
    backgroundColor: '#090909',
  },
});

内容的提问来源于stack exchange，提问作者Niccolò Caselli