React-Native 启动白屏优化

2,314 阅读2分钟

microsoft-edge-TcC5qr3dpgA-unsplash.jpg

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

前言

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

屏幕录制2021-10-17 下午1.gif

本项目 "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 端

添加图片

截屏2021-10-17 下午2.34.58.png

创建一个 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>

截屏2021-10-17 下午2.07.24.png

创建 colors.xml 文件

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

截屏2021-10-17 下午2.15.22.png

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

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

截屏2021-10-17 下午2.19.14.png

  • 打开 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);
    }
}

截屏2021-10-17 下午2.24.54.png

在合适的时机隐藏图片

截屏2021-10-17 下午2.38.14.png

重启 android 应用

yarn android

实现效果

1634454286473382 (2).gif

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 项目然后在左侧文件导航面板右键选择新建文件。

截屏2021-10-17 下午7.00.44.png

截屏2021-10-17 下午7.03.09.png

创建LaunchScreen Image Set

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

截屏2021-10-17 下午7.09.54.png

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

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

截屏2021-10-17 下午7.17.57.png

截屏2021-10-17 下午7.21.42.png

应用LaunchScreen.storyboard

在 TARGETS 中设置 Launch Screen File

截屏2021-10-17 下午7.25.44.png

重启 ios 应用

yarn ios

实现效果

Simulator Screen Recording - iPhone 12 - 2021-10-17 at 19.33.04 (1).gif