Image source unsplash.com/photos/TcC5…

preface

In the React-Native project, we had a blank screen every time we opened the app. The reason for this blank screen was that the system needed to initialize the app and then load the JavaScript code, which took longer than the native app.

"React-native ":" 0.64.1" version, "ios":"15.0"

It can be seen from the above that there is a white screen waiting time for the first rendering, which can be optimized by using react-native-splash-screen.

react-native-splash-screen

The idea behind the React-native splash-screen library is to display an image when the app is loading. When the JavaScript code is loaded, we can hide the image when appropriate.

The installation

yarn add react-native-splash-screen
Copy the code

The Android end

Add images

Create an Android layout fileapp/src/main/res/layout/launch_screen.xmlDisplay an image in this layout, which is our startup image

<? 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>

Copy the code

Create the colors.xml file

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

instyles.xmlTo add a topic that is configuredcolorPrimaryDarkProperty, which configures the color of the status barAndroid5.0Only later versions are available.

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

  • Open theAndroid/app/SRC/main/Java/com/RN project name/MainActivity. Javafile
import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {
    // Override the onCreate method to load the entire RN project
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        // Displays the launch screen, and the second parameter is a reference to our custom theme
        SplashScreen.show(this, R.style.SplashScreenTheme);
        super.onCreate(savedInstanceState); }}Copy the code

Hide images when appropriate

Restarting an Android App

yarn android
Copy the code

Implementation effect

The ios side

pods install

cd ios && pod install
Copy the code

updateAppDelegate.mfile

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // Add this sentence@implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary  *)launchOptions {/ /... other code

    [RNSplashScreen show];  // Add this sentence, this sentence must be at the end
    return YES;
}

@end

Copy the code

Create LaunchScreen. Storyboard

Reference github.com/crazycodebo…

Open the iOS project under the project with Xcode and right-click On the left file navigation panel and select New File.

Create the LaunchScreen Image Set

Open images.xcassets and add an Image Set named LaunchScreen

inLaunchScreen.storyboardaddImageViewAnd bind theLaunchScreen Image

Open launchScreen. storyboard, then add an ImageView, resize and constrain it, and bind the LaunchScreen Image Set to it.

Application LaunchScreen. Storyboard

Set Launch Screen File in TARGETS

Restarting ios Apps

yarn ios
Copy the code

Implementation effect