react-native-splash-screen集成实践（ios & android）

react-native在启动的时候会有瞬间的白屏出现，ios白屏时间会很短，安卓要相对长一些，大概1-3s时间。这是react-native的工做机制决定的。 react-native在启动时会装载js bundle到内存并渲染界面，这段时间界面是一个空View.
上面的过程咱们称之为项目的初始化，那么在这段项目初始化的过程当中咱们为了有更好的用户体验须要渲染一个对用户友好的界面来代替白屏，毕竟白屏对用户不太友好，你能够理解为跟h5中的loading是一个意思。然而配置原生的启动图不像咱们加个loading那么简单，react-native-splash-screen帮咱们封装了大部分配置，咱们须要作部分的集成就可使用，如下是配置教程：
1、下载 react-native-splash-screen:
在项目根目录运行终端执行如下命令

yarn  add react-native-splash-screen
    或者
  npm install react-native-splash-screen --save复制代码

特别注意 目前npm5存在安装新库时会删除其余库的问题，致使项目没法正常运行。请尽可能使用yarn代替npm操做；

2、安装：
运行终端执行如下命令进行自动安装

react-native link react-native-splash-screen复制代码

3、配置react-native部分，在你的首页导入react-native-splash-screen，在componentDidMount中执行hide隐藏启动屏（固然这不是必须的，按照你的须要在适当的时候隐藏它就行）：

4、配置启动图：

（一） ios部分：

一、打开ios目录下的AppDelegate.m文件，导入启动屏包。在return以前执行显示启动屏幕。

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

三、选中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复制代码

四、选中LaunchScreen.xib,会有个弹出框，默认选择肯定就行，而后把右边的 Use Launch Screen 取消选中（由于ios能够用来自定义图片启动屏幕或经过 LaunchScreen.xib花一个启动屏幕，ios默认花了一个，由于咱们用的是图片因此要取消它）。

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

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

（二） android部分：

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

二、在 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>复制代码

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

四、预览效果

可是感受仍是优势瑕疵，仍是有一瞬间的白屏，这时候须要在android/app/src/main/res/values/styles.xml中添加 true 设置透明背景

<resources>

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

</resources>复制代码

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

完美收官！

项目demo地址：github.com/duheng/Mozi

THE END！