react-native-splash-screen integrated Practice (ios & android)

react-native white screen will appear at startup moment, ios white screen time will be very short, Android is relatively longer, probably 1-3s time. This is a working mechanism react-native decision. react-native will be loaded when you start js bundle into memory and rendering interface, this interface is a time empty View.
The above process we call initiated project, in the course of this project we initiated in order to have a better user experience required to render a user-friendly interface instead of black and white, black and white, after all, not user-friendly, you can be understood as the loading with h5 is a meaning. However, the configuration starts diagram native as we add a loading so simple, react-native-splash-screen to help us encapsulates most of the configuration, we need to do part of the integration can be used, the following is the configuration tutorials:
First, download react- native-splash-screen:
execute the following command in the terminal project root directory run

  yarn  add react-native-splash-screen
    或者
  npm install react-native-splash-screen --save 

Special attention will delete the current problems of other libraries when installing a new library npm5 exist, resulting in the project can not function properly. Try to use the yarn in place npm operation;

Second, the installation:
Run terminal to execute the command automatically install

react-native link react-native-splash-screen 

Third, configure react-native parts, import react-native-splash-screen in your home, do hide hidden boot screen in componentDidMount in (of course, this is not necessary, as you need to hide it held when appropriate):

 

image.png

Fourth, the startup configuration diagram:

(A) Part iOS:

1. Open AppDelegate.m ios files in the directory, import start screen package. Prior to return to perform the startup screen.

 

b12.png

2、用Xcode打开ios工程，找到Image.xcassets并点击选中，在空白处选择 App Icons & Launch Images ➜ New ios Launch Image , 完成这步后会生成一个LaunchImage

 

b2.png

3、选中Image.xcassets ➜ LaunchImage，就是上一步创建的LaunchImage，右侧框中的部分是让你选择要支持的系统，横竖屏之类的（这个按照需求选择，如果你的项目不打算支持ios6可以不选择）。然后点击中间部分选中一个分辨率的框，上传相应分辨率的图片作为启动屏幕（注意：这里的分辨率一定要对，如果比例不对传不上去）

以下是选择框中不同屏幕的分辨率：

iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3x iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3x iPhone Portrait iOS 8-Retina HD 4.7 （750×1334） @2x iPhone Portrait iOS 7,8-2x （640×960） @2x iPhone Portrait iOS 7,8-Retina 4 （640×1136） @2x iPhone Portrait iOS 5,6-1x （320×480） @1x iPhone Portrait iOS 5,6-2x （640×960） @2x iPhone Portrait iOS 5,6-Retina4 （640×1136） @2x 

 

b3.png

4、选中LaunchScreen.xib,会有个弹出框，默认选择确定就行，然后把右边的 Use Launch Screen 取消选中（因为ios可以用来自定义图片启动屏幕或通过 LaunchScreen.xib花一个启动屏幕，ios默认花了一个，因为我们用的是图片所以要取消它）。

 

b10.png

5、如图选中项目工程，右侧会出现工程的基本配置，设置Launch Images Srouce配置为LaunchImage（如果没有LaunchImage会弹出一个框提示拷贝图片，按照默认点确定就行），然后设置Launch Screen File为空（这个很重要）。

 

b4.png

 

6、预览效果（上传后图片被删帧压缩太狠，效果不佳，凑合看把）

 

start0.gif

（二） android部分：

1、打开MainActivity.java按照下图1，2，3步骤添加启动屏包以及方法：

 

b14.png

2、在 android/app/src/mian/res目录下创建layout文件夹，并在创建的layout文件夹中创建launch_screen.xml

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> 

3、在 android/app/src/mian/res目录下创建drawable-xhdpi文件夹，并添加名为launch_screen.png的图片（其实你要想适配的更全面可以像mipmap一样添加不同分辨率的图片）

 

image.png

4、预览效果

 

an_bf.gif

但是感觉还是优点瑕疵，还是有一瞬间的白屏，这时候需要在android/app/src/main/res/values/styles.xml中添加 <item name="android:windowIsTranslucent">true</item> 设置透明背景

<resources>

<!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <!--设置透明背景--> <item name="android:windowIsTranslucent">true</item> </style> </resources> 

接下来看下设置透明背景后的效果

 

an0101.gif

完美收官！