React-Native 启动白屏优化

图片来源 unsplash.com/photos/TcC5…

前言

在 react-native 项目，我们每次打开应用都会有一个白屏的时间， 这个白屏主要是因为系统在启动应用的时候，需要初始化工作然后再加载 JavaScript 代码，这个时间会比原生的应用会长一点。

本项目 "react-native": "0.64.1" 版本，"ios":"15.0"

从上面可以看到首屏渲染时会有一个白屏等待时间，我们可以使用 react-native-splash-screen 来优化一下。

react-native-splash-screen

react-native-splash-screen 这个库的原理就是在应用加载的时候显示一张图片，当JavaScript 代码加载完毕时，我们可以在合适的时机隐藏这个图片。

安装

yarn add react-native-splash-screen

Android 端

添加图片

创建一个 Android 的布局文件 app/src/main/res/layout/launch_screen.xml，在这个布局中显示一张图片，也就是我们的启动图片

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>

创建 colors.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimaryDark">#FFFFFF</color>
</resources>

在 styles.xml 中添加一个主题，这个主题配置了 colorPrimaryDark 属性，这个属性是配置状态栏的颜色的，当然这个属性是只能在 Android5.0 版本以上才有效。

<style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
	<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

• 打开 android/app/src/main/java/com/RN项目名称/MainActivity.java 文件

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {
    // 重写onCreate方法，整个RN项目的加载的入口
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        // 显示启动屏，第二个参数是我们自定义主题的引用
        SplashScreen.show(this, R.style.SplashScreenTheme);
        super.onCreate(savedInstanceState);
    }
}

在合适的时机隐藏图片

重启 android 应用

yarn android

实现效果

ios 端

pods install

cd ios && pod install

更新 AppDelegate.m 文件

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // 添加这一句

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // 添加这一句，这一句一定要在最后
    return YES;
}

@end

创建LaunchScreen.storyboard

参考 github.com/crazycodebo…

用 xcode 打开项目下的 iOS 项目然后在左侧文件导航面板右键选择新建文件。

创建LaunchScreen Image Set

打开Images.xcassets然后添加名为LaunchScreen的Image Set

在 LaunchScreen.storyboard 中添加 ImageView 并绑定 LaunchScreen Image

打开LaunchScreen.storyboard，然后添加一个 ImageView，调整好大小与约束，在为其绑定LaunchScreen Image Set。

应用LaunchScreen.storyboard

在 TARGETS 中设置 Launch Screen File

重启 ios 应用

yarn ios

实现效果