前言
在 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
用 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