Hi everyone, I’m Luo Zhu 🎋, a woodworking front end 🧚🏻♀️ living in Hangzhou. If you like my article 🧚🏻, you can gather spiritulist blog for me by clicking like.

If you have a designer, please ask the designer to give you all the sizes you want, if not please use the icon factory opinion to generate all the sizes of the icon/start image.

Android

1. Customize your startup image by creating the launch_screen.png file and placing it in the Mipmap – folder. Android automatically selects the right resolution, so you don’t have to provide images in all phone resolutions. However, you can provide a startup image for all of the following resolutions:

  • mipmap-mdpi
  • mipmap-hdpi
  • mipmap-xhdpi
  • mipmap-xxhdpi
  • mipmap-xxxhdpi

2. Update your mainactivity. Java file as follows:

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

public class MainActivity extends ReactActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
     SplashScreen.show(this.true);  // Add this sentence
     super.onCreate(savedInstanceState);
  }
  / /... other code
}
Copy the code

2. Create a layout file called launch_screen.xml to customize your launch screen.


      
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@mipmap/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>
Copy the code

3. You can also enable the app theme transparency option to solve the temporary blank screen caused by the theme when the app starts. The specific steps are as follows:

Open the android/app/SRC/main/res/values/styles. The XML file, add the item name = “android: windowIsTranslucent” > true < / item >, as follows:

<resources>
    <! -- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <! -- Customize your theme here. -->
        <! -- Set transparent background -->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>
Copy the code

4, Add a color called primary_dark in app/SRC/main/res/values/colors. The XML


      
<resources>
    <color name="primary_dark"># 000000</color>
</resources>
Copy the code

iOS

Xcode 11 configures LaunchImage

If there are designer resources, please UI students to provide the following sizes of pictures

  • 640×960
  • 640×1136
  • 750×1334
  • 828×1792
  • 1125×2436
  • 1242×2436

If you don’t have designer resources, you can use the icon factory to generate your own

1. Add LaunchImage

2. Drag the prepared image to the area in the red box below

BuildSetting Asset Catalog LaunchImage Set Name = LaunchImage Set Name = LaunchImage;

4. Clear Launch Screen File

Delete UILaunchStoryboardName from info.list:

<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
Copy the code

updateAppDelegate.m

#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

Hide the startup diagram

Class components

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {
    componentDidMount(){ SplashScreen.hide(); }}Copy the code

Function component

const App = () = > {
  React.useEffect(() = > {
    SplashScreen.hide()
  }, [])
  return(...).Copy the code