如何在 React Native 中构建启动屏幕（附代码示例）

在移动应用中，第一印象至关重要。当用户启动您的 React Native 应用时，启动屏幕是他们看到的第一个界面。启动屏幕在应用初始化时显示您的应用标志或品牌，通过避免空白屏幕并向用户保证应用正在加载，为您的应用提供更加精致的感觉。

什么是 React Native 中的启动屏幕？

启动屏幕是应用启动时出现的初始屏幕。在 React Native 中，启动屏幕通常在纯色背景上显示应用名称、标志或其他品牌元素。在原生代码加载和准备 React Native 应用期间，它保持可见。启动屏幕的主要目的是：

• 品牌展示：立即显示应用品牌
• 用户体验：防止用户在应用启动期间看到空白或无响应的屏幕
• 速度感知：启动屏幕给人一种正在进行操作的印象，使加载时间感觉更短

为什么在 React Native 的 iOS 应用中使用启动屏幕？

所有移动应用都能从启动屏幕中受益，但在 iOS 上它们尤为重要。事实上，苹果要求应用必须有启动屏幕 – 在 iOS 上，启动屏幕不仅仅是为了展示；它是预期用户体验的一部分。以下是关键原因：

• 增强用户体验：带有精心设计的启动屏幕的 iOS 应用感觉更流畅、更专业
• 应用品牌：启动屏幕展示您的应用标志、标语或艺术作品
• 管理加载时间：iOS 将显示启动屏幕直到应用准备就绪，掩盖启动过程中的任何延迟

在 React Native 中设置启动屏幕（iOS 特定）

步骤 1：创建启动屏幕图像

首先，您需要一个启动屏幕图像：

• 尺寸：使用高分辨率图像（至少 2000 x 2000 像素），在所有设备屏幕上看起来都不错
• 格式：PNG 是启动屏幕最常用的格式
• 方向和安全区域：将重要内容保持在图像中心区域

专业提示： 像 App Icon Generator (appicon.co) 这样的工具可以帮助为各种 iOS 屏幕创建正确尺寸的图像。

步骤 2：在 Xcode 中添加启动屏幕

1. 在 Xcode 中打开 iOS 项目：导航到 ios 文件夹并打开 .xcworkspace 或 .xcodeproj 文件。
2. 添加图像资源：在 Xcode 中，找到 Images.xcassets，创建一个名为 ""Splash"" 的新图像集，并添加您的启动图像。
3. 编辑启动屏幕故事板：打开 LaunchScreen.storyboard，删除任何默认元素，并添加一个图像视图。将图像设置为您的启动图像，调整大小或设置约束，并设置内容模式（Aspect Fit 或 Aspect Fill）。
4. 设置安全区域（如需要）：如有必要，禁用""使用安全区域""以允许图像延伸到状态栏/刘海区域下方。

步骤 3：修改 Info.plist 以获得正确的显示设置

1. 打开 Info.plist 并查找键 ""UILaunchStoryboardName""。
2. 确保其值是您的故事板名称（例如，""LaunchScreen""）。
3. 验证 LaunchScreen 文件已包含在应用目标中。

现在在 iOS 模拟器或设备上运行您的应用，您会看到启动屏幕在启动时短暂出现。

使用库实现启动屏幕

使用库可以简化流程并提供额外的控制。两个流行的库是：

• react-native-splash-screen – 广泛用于 iOS 和 Android
• expo-splash-screen – 用于 Expo 管理工作流

让我们使用 react-native-splash-screen：

1. 安装库：

   npm install react-native-splash-screen --save
   

   或

   yarn add react-native-splash-screen
   

2. iOS：安装 pods：

   cd ios
   pod install
   cd ..
   

3. 配置 iOS 原生代码：

   • 修改 AppDelegate.m：

     #import ""RNSplashScreen.h""  // 添加这个导入
     

     在 application:didFinishLaunchingWithOptions: 方法中，添加：

     - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
         // ... 现有的 React Native 引导代码 ...
         [self.window makeKeyAndVisible];
         [RNSplashScreen show];  // 显示启动屏幕
         return YES;
     }
     

   • 验证 Info.plist：确保 UILaunchStoryboardName 仍然设置为您的 LaunchScreen 故事板。

4. 配置 Android 原生代码（如需要）：

   • 在 MainActivity 中导入 SplashScreen
   • 在 super.onCreate 之前调用 SplashScreen.show(this)
   • 添加 launch_screen.xml 布局
   • 更新 AndroidManifest

5. 在 React Native 代码中隐藏启动屏幕：

   // App.js (或 index.js)
   import React, { useEffect } from 'react';
   import { View, Text } from 'react-native';
   import SplashScreen from 'react-native-splash-screen';  // 导入库
   
   const App = () => {
     useEffect(() => {
       // 一旦应用准备就绪，隐藏启动屏幕
       SplashScreen.hide();
     }, []);
   
     return (
       <View>{/* 您的应用 UI 组件从这里开始 */}
         <Text>你好，主应用！</Text>
       </View>
     );
   };
   
   export default App;
   

处理启动屏幕时间和过渡

• 保持简短：启动屏幕应该只在必要的时间内可见（理想情况下 1-3 秒）
• 准备就绪时隐藏：一旦应用的主要内容准备好显示，就调用 SplashScreen.hide()
• 匹配过渡：在应用的初始屏幕中使用与启动屏幕相同的背景颜色
• 平滑动画：考虑在隐藏启动屏幕时添加微妙的动画
• 一致的持续时间：有些应用即使应用加载更快，也会显示启动屏幕最少时间（例如，2 秒）

常见问题和调试技巧

• 启动屏幕不显示：检查 Info.plist 中的 UILaunchStoryboardName，验证 LaunchScreen 文件是否在应用目标中，并确认图像资源已包含
• 图像被拉伸或裁剪：检查内容模式设置，检查约束，并验证您提供了正确的图像尺寸
• 启动屏幕闪烁后出现空白屏幕：仅在 UI 准备就绪时隐藏启动屏幕，并匹配背景颜色
• 启动屏幕卡住：确保调用了 SplashScreen.hide()，并检查是否有早期错误
• iPad 上的纵横比不正确：使用约束而不是固定尺寸，将故事板设备设置为通用，并提供高分辨率图像
• 更改不反映：清理构建，重新安装应用，并确保您正在编辑正确的文件

结论

为您的 React Native 应用添加启动屏幕是一个小步骤，但能带来更专业和用户友好的体验。通过在 Xcode 中手动设置启动屏幕或使用 react-native-splash-screen 等库，您可以集成一个显示您品牌并在启动期间保持用户参与的启动屏幕。

记住要考虑时间控制，并确保启动屏幕与应用的第一个屏幕之间的平滑过渡。通过正确的实现，您的启动屏幕将从应用启动的那一刻起就提升应用的感知质量。

常见问题