React Native最新版本项目简易启动页（Splash Screen）实现示例咨询

嘿，我完全懂你的感受——网上不少React Native启动页教程都绕一堆复杂的原生配置，对想快速搞定的开发者来说真的太麻烦了。下面给你分享一个针对**最新React Native版本（0.70+）**的极简实现方案，亲测有效，几乎不用改太多原生代码，几步就能搞定：

一、先搞定依赖安装 #

假设你已经用npx react-native init创建了最新的裸项目，首先安装官方推荐的轻量库：

# npm 安装
npm install expo-splash-screen
# 或者用 yarn
yarn add expo-splash-screen

iOS项目需要额外安装Pod依赖：

cd ios && pod install && cd ..

二、极简原生配置（仅2步，iOS/Android各一套） #

iOS端配置 #

1. 把你的启动页图片（建议准备1x、2x、3x三套尺寸，比如320x568、640x1136、1242x2688）拖进ios/[你的项目名]/Images.xcassets，新建一个Image Set命名为Splash，把对应尺寸的图片拖进去。
2. 打开ios/[你的项目名]/Info.plist，添加/修改以下配置（如果已有UILaunchScreen节点就直接改）：

<key>UILaunchScreen</key>
<dict>
  <key>UIImageName</key>
  <string>Splash</string>
  <key>UIStatusBarHidden</key>
  <true/>
</dict>

Android端配置 #

1. 把启动页图片（建议准备不同dpi的版本：mdpi、hdpi、xhdpi、xxhdpi）放到android/app/src/main/res/drawable-xxxhdpi等对应文件夹，命名为splash.png。
2. 打开android/app/src/main/res/values/styles.xml，修改AppTheme的windowBackground属性：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 保留原有其他配置，新增或修改这一行 -->
    <item name="android:windowBackground">@drawable/splash</item>
</style>

三、JS端控制启动页时机 #

在你的入口文件App.js（或App.tsx）里，用几行代码就能控制启动页什么时候隐藏：

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';

// 先阻止启动页自动隐藏
SplashScreen.preventAutoHideAsync();

export default function App() {
  const [isAppReady, setIsAppReady] = useState(false);

  useEffect(() => {
    async function initApp() {
      try {
        // 这里放你的App初始化逻辑：比如加载本地缓存、初始化SDK、请求接口等
        // 下面是模拟2秒的初始化耗时，实际项目替换成你的真实逻辑
        await new Promise(resolve => setTimeout(resolve, 2000));
      } catch (err) {
        console.warn('初始化出错:', err);
      } finally {
        // 初始化完成，标记App就绪并隐藏启动页
        setIsAppReady(true);
        await SplashScreen.hideAsync();
      }
    }

    initApp();
  }, []);

  // App没就绪时，什么都不用渲染，原生启动页会一直显示
  if (!isAppReady) return null;

  return (
    <View style={styles.container}>
      <Text>终于进入App主界面啦 🎉</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

四、几个关键提醒 #

• 这个方案的核心是用原生系统的启动页作为基础，再通过JS控制隐藏时机，完全避免了复杂的原生导航栈配置或者臃肿的第三方库。
• 如果你的App不需要初始化逻辑，直接在useEffect里调用SplashScreen.hideAsync()就行，启动页会短暂显示后进入主界面。
• 图片一定要适配不同分辨率，不然在某些设备上会拉伸或者显示不全。

内容来源于stack exchange